0

アニメーション化するコンテンツの領域がありますが、アニメーションは、トリガーをクリックしたときに初めて機能します。トリガーを2回クリックすると、アニメーションが反転します。これが私のコードです。

HTML

<div class="drawer-content" id="signin">   
</div><!--End #signin-->

jQuery

$(document).ready(function() {

    //We hide the panel
    $('.drawer-content').css('marginTop', '-140px' );

    //When the anchor is clicked the panel will slide up        
    $('.open-drawer').click(function(){ 
        $('.drawer-content').animate({marginTop: '0px',}, 1000 );

        //Append active class to anchor
        $(this).removeClass('open-drawer').addClass('active');

        //On click the active link will cause the panel to slide down
        $('.active').click(function() {
            $(this).removeClass('active').addClass('open-drawer');
            $('.drawer-content').animate({marginTop: '-140px',}, 1000 );
        });

    });

});//End DOM Load

編集 ここに尋ねた人のための実例があります。ありがとう！ http://livecoding.io/3854307

コメントはこれをかなり自明にするはずです。初めて動作しますが、アニメーションをもう一度実行しようとすると、ボックスが下にスライドしてから、再び上にスライドします。私は何が間違っているのですか？

4

2 に答える 2

0

HTMLによって異なりますが、「クリック」が.open-drawerに登録されていると予想されます。これにより、アニメーションが開始され、クリックハンドラーが.activeに設定されます。

これで、.activeが.open-drawerの親（HTML）である場合、同じクリックに気付くでしょう（DOMで上向きにバブリングしないため）。これにより、アニメーションが現在のアニメーションに追加されます。

私の最初の提案はevent.stopPropagation()、最初のイベントハンドラーにを追加して、何が起こるかを確認することです。

ただし、前述のように、HTMLまたはサンプルページがないと、問題を特定してデバッグすることは困難です。

（ http://api.jquery.com/event.stopPropagation/も参照してください）

于 2012-10-08T19:00:12.313 に答える
0

.slideToggleは機能しますか？説明：スライドモーションで一致した要素を表示または非表示にします。

アップデート！

jqueryコードをこれに置き換えてみてください。

 //We hide the panel
$('.drawer-content').hide();

//When the anchor is clicked the panel will slide up        
$('.open-drawer').click(function(){
    $('.drawer-content').slideToggle();

});
于 2012-10-08T19:15:06.320 に答える