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显示/消失。它按预期工作，但由于jQuery将其CSS #info DIV属性设置为display，因此none在动画后消失。

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

Answer 1

我建议使用.slideToggle：

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

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

Answer 2

javascript代码

 $('#clickme').toggle(
        function () {
            $('#info').animate({
                height:"0px"
            }, 500);
        },
        function () {
            $('#info').animate({
                height:"100px"
            }, 500);
        });

http://jsfiddle.net/amkrtchyan/zymUK/2/

Answer 3

用这个替换你的点击功能：

$('#clickme').click(function() {
        var whichSetting = $('#info').css('marginBottom');
        if(whichSetting == '-100px') {
             whichSetting = '0px';  
        }
        else {
             whichSetting = '-100px';  
        }
        $('#info').animate({
            marginBottom: whichSetting
            },{
                duration:500
        });

    });