Question

我希望用一个平滑的动画替换另一个按钮而不改变元素的高度，因为我将在其下方有其他按钮，我不想移动（所以我不认为我可以使用.hide和.show，我想要一个权利，无论如何左替换）。我对使用其他技术的解决方案持开放态度，但请注意，我希望它可以在PC，Android和iOS上的所有现代浏览器中运行。

我以为我会使用JQuery“.animate”。但是，当我在下面设置代码示例并单击按钮时，它不会缩小为空（尽管我设置了最小宽度）。

如果无法解决这个问题，我宁愿在我的特殊效果中加一个卷曲，并且在它周围工作过于复杂（当第一个按钮达到非零最小尺寸时，我最后会有一个混蛋）消失，另一个跳到全尺寸。）

在最终版本中，在第一个版本之后会有另一个按钮同时从0px扩展，但我认为（直到另外说明）解析下面的脚本也将导致如何以0px宽度开始。

请帮忙。感谢。

<!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>

Answer 1

将以下css添加到按钮

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

Answer 2

或者，您可以直接在代码中添加CSS属性。看看 DEMO 。

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

最小宽度0不适用于按钮

2 个答案: