jQuery动画方法隐藏和显示左面板

Question

我正在尝试使用 jQuery 实现简单的动画。这是我的代码：

<div>
    <div id="leftPannel" style="height: 500px; width: 200px; background-color: Olive;
        float: left; display: none">
    </div>
    <div id="rest" style="height: 500px; width: 400px; float: left; margin-left: 10px;
        background-color: Purple">
        <input type="button" id="Display" value="Display" /></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Display').click(function () {
            var status = $('#leftPannel').css("display");
            if (status == "none") {
                $('#leftPannel').animate({ display: 'show' }, "slow")
            }
            else {
                $('#leftPannel').animate({ display: 'hide' }, "slow")
            }

        });
    });
</script>

问题是当左侧面板被隐藏时，它会随着点击事件显示。但再次单击它不会再次隐藏。为什么 else 没有执行？

Answer 1

你也可以试试这个

 $(document).ready(function () {
    $('#Display').click(function () {
          $('#leftPannel').animate({width: 'toggle'});
    });
});

Answer 2

试试这样的：

$(document).ready(function () {
    $('#Display').click(function () {
        $('#leftPannel').slideToggle();
    });
});

我建议使用.slideToggle() 方法，因为您正在尝试.animate()。如果你想要简单的.show()和.hide()，也可以使用.toggle()方法。

更新：清理一些乱七八糟的东西

如果您正在尝试使用/学习.animate() 方法，请尝试使用元素的可见性；您通过获取.css('display') 尝试的方式。这是一个更好的方法。试试吧，

$('#Display').click(function () {
    if( $('#leftPannel').is(":visible") ){
        // write animate method if visible
    }
    else{
        // if not visible
    }
});