jQuery .animate()设置display: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点击都会出现/消失.它按预期工作,除了#info DIV由于jQuery将其CSS display属性设置为动画后动画消失none.

我怎么能告诉jQuery停止隐藏我的DIV？

Answer 1

我建议使用.slideToggle:

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

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