如何获得默认外观答案

【问题标题】：How to get to default appearance如何获得默认外观
【发布时间】：2014-09-10 13:39:03
【问题描述】：

This is a follow up to a problem posted earlier. Click here to open it

我现在有以下代码，但我无法获得似乎采用默认边框和填充的第二个按钮。请帮忙。谢谢。

<!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(){
    $("#b1").animate({width:'0px', padding:'0', border:'0'}, { duration: 1000, queue: false });
    $("#b2").animate({width:'200px', padding:"", border:""}, { duration: 1000, queue: false });
  });
});
</script> 
<style>
button {
min-width:0px;
height: 22px;
width: 200px;
}

#b2 {
width: 0px;
padding: 0;
border: 0;
}


</style>
</head>

<body>
<button id="b1">Start Animation</button><button id="b2">Animation Done</button>

</body>
</html>

【问题讨论】：

很酷，除了不透明与否，动画结束后它仍然占用一些空间:(
完成后，新按钮比原来的按钮更靠右，大概是因为原来的按钮仍然占用一些空间。
我越来越接近解决方案，从 display: none 开始用于 b2 并在动画之前使用 .show。但是，随着 b1 缩小，文本换行并且按钮下降。在另一种语言中，我可以通过将baselineAligned 设置为false 来控制它，但我不知道如何在这里处理它。
很高兴知道你已经解决了你的问题伙伴。我正在移除早期的 cmets 以减少噪音 :)
它仍然不完美。我一开始没有注意到 b2 太胖，这可能会导致页面的其余部分被移动，因为两个按钮的组合宽度会比应有的更胖。

标签： jquery css html jquery-animate

【解决方案1】：

也许你可以像下面这样解决

css代码：

button {
min-width:0px;
height: 22px;
width: 200px;
}

#b2 {
width: 0px; display:none;
}

jquery 代码：

 $("button").click(function(){
     $("#b1").animate({width:'0px',padding:'0px'}, 1000,function(){$('#b1').hide();});
     $("#b2").css('display','inline-block').animate({width:'200px'}, { duration: 1000, queue: false });
  });

你可以在这里看到结果 ---> http://jsfiddle.net/Junkie/4c9g3/

【讨论】：