2

我正在用一些 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：

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

            });
        }
    });

})

还有另一个编辑，仍然无法正常工作......我真的不明白我必须在这里更改什么才能使其正常工作？我尝试了这么多真/假组合，但没有成功，它像以前一样工作，有重叠。或者在某些真假组合中，它是完全锁定的，一旦展开就无法返回。

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

我会这样做以防止 Double 事件：

$(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 回答