javascript - jQuery .animate() 设置显示 :none, 如何避免？

Question

我有以下代码:

HTML:

<div id="clickme">
    Click me  :-)
</div>

<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;">
  Stay, damn!
</div>

JavaScript:

$('#clickme').click(function() {
    $('#info').animate({
        marginBottom: 'toggle'
    },{
        duration:500
    });
});

它也可以在 http://jsfiddle.net/DxnQJ/ 获得

显然，我希望 #info DIV 在单击 #clickme DIV 时出现/消失。它按预期工作，只是由于 jQuery 将其 CSS display 属性设置为 none，#info DIV 在动画后消失。

如何告诉 jQuery 停止隐藏我的 DIV？

Answer 1

我建议使用 .slideToggle:

$('#clickme').click(function() {
    $('#info').slideToggle(500);
});

演示:http://jsfiddle.net/Daniel_Hug/DxnQJ/2