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>

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

Answer 1

尝试这样的事情：

$(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
    }
});

Answer 2

你也可以试试这个

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

jQuery动画方法隐藏＆amp;显示左侧面板

2 个答案: