2

クライアントの Web ギャラリーをいくつかの jQuery エフェクトで更新しています。すでにいくつかの変更を成功させましたが、最終的なスクリプトに問題があります。すべてが正常に機能していますが、高速クリックで開始すると、アニメーションが通常のパターンを破り、すべてが混乱します。stop() 関数を使用する必要があることは承知していますが、機能するはずなので、100% 機能させることはできません。

$(function () { 
    $(".gallery_view_switch").toggle(function () {

        $(this).html('Switching ...');
        $(".sidebar").slideToggle('slow', function () {
            $(".single_page").animate({width: 870}, 700),
            $('img.gallery').css('margin-left', '5px'), 
            $('#top').css('margin-right', '-290px'), 
            $('.gallery_view_switch').html('Show gallery navigation');   
        });

    },function () {

        $(this).html('Switching ...');
        $('img.gallery').css('margin-left', '12px'),
        $(".single_page").animate({width: 550}, 700, function () {
            $('#top').css('margin-right', '30px'), 
            $(".sidebar").slideToggle('slow'),
            $('.gallery_view_switch').html('Hide gallery navigation');
        });
    });
})

したがって、ここに「クリック」アクションがあり、ギャラリー ナビゲーションのサイドバーが上がり、コンテンツのサイズが追加され、画像の新しい CSS プロパティが取得されるため、ギャラリーのビューがより広くなります。

2 回目のクリックで、コンテンツは元のサイズとプロパティを取得し、サイドバーは元の位置に戻ります。

ここで私がやろうとしているのは、追加のクリックのためにアニメーション キューを停止し、すべてが整って準備が整う前に新しいアニメーションが発生しないようにすることです。

ありがとう！

編集2：

   $(function () { 

    var isExpanding = false;

    $(".gallery_view_switch").toggle(function () {

        if(!isExpanding) {           

            $(this).html('Switching ...');

            $(".sidebar").slideToggle('slow', function () {

                isExpanding = true;

                $(".single_page").animate({
                    width: 870
                }, 700),
                $('img.gallery').css('margin-left', '5px'), 
                $('#top').css('margin-right', '-290px'), 
                $('.gallery_view_switch').html('Show gallery navigation'); 

                isExpanding = false;

            });
        }
    },function () {
        if(!isExpanding) {

            $(this).html('Switching ...');
            $('img.gallery').css('margin-left', '12px'),

            $(".single_page").animate({
                width: 550
            }, 700, function () {

                isExpanding = true;


                $('#top').css('margin-right', '30px'), 
                $(".sidebar").stop().slideToggle('slow'),
                $('.gallery_view_switch').html('Hide gallery navigation');

                isExpanding = false;

            });
        }
    });

})

そして、別の編集がまだ機能していません...機能させるためにここで何を変更する必要があるのか​​ 本当にわかりませんか？私は非常に多くの真/偽の組み合わせを試しましたが、成功しませんでした。以前と同じように機能しており、重複しています。または、いくつかの true/false の組み合わせでは、完全にロックされており、展開すると元に戻すことができません。

4

2 に答える 2

1

アニメーション関数で.stop（）を使用します。

$(function () { 
    $(".gallery_view_switch").toggle(function () {

        $(this).html('Switching ...');
        $(".sidebar").stop().slideToggle('slow', function () {
            $(".single_page").stop().animate({width: 870}, 700),
            $('img.gallery').css('margin-left', '5px'), 
            $('#top').css('margin-right', '-290px'), 
            $('.gallery_view_switch').html('Show gallery navigation');   
        });

    },function () {

        $(this).html('Switching ...');
        $('img.gallery').css('margin-left', '12px'),
        $(".single_page").stop().animate({width: 550}, 700, function () {
            $('#top').css('margin-right', '30px'), 
            $(".sidebar").stop().slideToggle('slow'),
            $('.gallery_view_switch').html('Hide gallery navigation');
        });
    });
})
于 2013-02-08T20:26:56.210 に答える
0

ダブルイベントを防ぐために、このようにします。

$(function () { 

var isExpanding = false;

$(".gallery_view_switch").toggle(function () {

    if(!isExpanding) {
        //stuff
        $(".sidebar").slideToggle('slow', function () {
            isExanding = true;
            //Do your stuff
            isExpanding = false;
        });
    }
},function () {
    if(!isExpanding) {
        $(".single_page").animate({width: 550}, 700, function () {
            isExanding = true;
            //Do your stuff
            isExpanding = false;
        });
    }
});
于 2013-02-08T20:27:35.927 に答える