0

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 が実行されないのはなぜですか?

4

2 に答える 2

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
    }
});
于 2012-11-06T05:16:32.693 に答える
2

これを試すこともできます

 $(document).ready(function () {
    $('#Display').click(function () {
          $('#leftPannel').animate({width: 'toggle'});
    });
});
于 2012-11-06T05:35:19.810 に答える