jquery - 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').slideToggle();
    });
});

.slideToggle()自从您尝试以来，我就建议了该方法.animate()。如果你想要简单的.show()and .hide()，你也可以使用该.toggle()方法。

更新：清理一些混乱

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

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

Answer 2

你也可以试试这个

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