最小宽度0对于按钮不起作用 [英] Min-width 0 doesn't work for buttons
问题描述
我想用一个平滑的动画替换一个按钮，而不改变元素的高度，因为我会有其他按钮，在他们下面，我不想移动（所以我不认为我可以使用.hide和.show，我想要一个权利，无论如何左替换）。我对使用其他技术的解决方案开放，但请注意，我希望这可以在PC，Android和iOS上的所有现代浏览器中运行。
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.
我想使用JQuery.animate。但是，当我设置下面的代码示例，并单击按钮它不收缩为无（尽管我的设置最小宽度）。
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).
在最终版本中，第一个之后会有另一个按钮，同时从0px扩展，但我推测解决下面的脚本也将导致如何从0px宽度开始。
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.
请帮助。感谢。
<!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>
推荐答案
也可以直接在代码中添加CSS属性。请查看 DEMO 。
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'});
});
});
这篇关于最小宽度0对于按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
