1

私が何をしても、実行中のクリックによってこのアニメーションのチェーンが影響を受けないようにすることはできません。.stopそれぞれの前に配置しようとしまし.animateたが（ブール値に対して「true」/「false」のさまざまな組み合わせを試してみました）、それでは望ましい効果が得られません。

理想的には、キュー/チェーンが完了するまで、アニメーションはクリックに完全に反応しなくなります。

$(window).load(function () {
    $(document).ready(function () {
        $('.title-bar, #menu-wrap').click(function () {
            if ($('#menu-wrap').offset().top - $(window).scrollTop() === 0) {
                $('#menu-wrap').animate({top : '-170px'}, 1000);    
                $('.nav').slideToggle(1400);       
                $('.lower').css('background-image', 'none');
            } else {
                $('#menu-wrap').offset().top = 0;     
                $('#menu-wrap').animate({top : '0px'}, 1000); 
                $('.nav').slideToggle(600);
                $('.lower').css({'background-image' : 'url(menu2.png)', 'background-position' : 'bottom center'});
            }
        });
   });
});

あなたが助けることができることを願っています

4

2 に答える 2

2

$(elem).is(':animated')要素がアニメーション化されているかどうかを確認するための構文を使用して、コードをラップします。元：

if ( !$(this).is(':animated') ) ...

更新された例：

    $('.title-bar, #menu-wrap').click(function () {
        if ( !$(this).is(':animated') ) {
        if ($('#menu-wrap').offset().top - $(window).scrollTop() === 0) {
            $('#menu-wrap').animate({top : '-170px'}, 1000);    
            $('.nav').slideToggle(1400);       
            $('.lower').css('background-image', 'none');
        } else {
            $('#menu-wrap').offset().top = 0;     
            $('#menu-wrap').animate({top : '0px'}, 1000); 
            $('.nav').slideToggle(600);
            $('.lower').css({'background-image' : 'url(menu2.png)', 'background-position' : 'bottom center'});
        }
        }
    });
于 2012-08-17T16:46:05.960 に答える
0

あなたを助けるキューと呼ばれるプロパティがあります。これは役立つはずだと思います...見た目は、他の関数が完了した後に呼び出されるコールバック関数を作成する必要があります。

于 2012-08-17T16:46:23.563 に答える