Min-width 0 doesn't work for buttons

问题

I wish to replace one button with another with a smooth animation and without changing the height of the element, as I'll have other buttons underneath them that I don't want to move (so I don't think that I can use .hide and .show and I want a right to left replacement anyway). I'm open to solutions using other technology, but note that I want this to run in all modern browsers on PC, Android and iOS.

I thought that I'd use JQuery ".animate". However when I set up the code sample below and click the button it doesn't shrink away to nothing (despite my setting min-width).

If this can't be fixed it will rather put a crimp in my special effect and overly complicate working around it (I'd have a jerk at the end when the first button, having reached non-zero minimum size, just vanishes and the other one is jumped to full size).

In the final version there would be another button after the first that would be expanded from 0px at the same time, but I presume (until told differently) that resolving the script below will also lead to how to start at 0px width.

Please help. Thanks.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("button").animate({width:'0px'});
  });
});
</script> 
<style>
button {
min-width:0px;
height: 22px;
}
</style>
</head>

<body>
<button>Start Animation</button>

</body>
</html>

回答1:

Alternatively you can directly add the CSS property on your code. have a look at DEMO.

$(document).ready(function(){
  $("button").click(function(){
    $("button").animate({width:'0px', padding:'0', border:'0'});
  });
});

回答2:

add below css to button

 display:inline-block;
 padding:0px;
 border:0px;

来源：https://stackoverflow.com/questions/24840150/min-width-0-doesnt-work-for-buttons

标签

jquery

css

html5

jquery-animate