Question

无论我做什么，我都无法让这一系列的动画在运行时不受咔嗒声的影响。我尝试在.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'});
            }
        });
   });
});

希望你能帮忙

Answer 1

使用$(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'});
        }
        }
    });

Answer 2

有一个名为queue的属性可以帮到你。我认为这应该有所帮助...它看起来的样子，你应该写一个回调函数，它将在其他函数完成后调用。

使jQuery动画队列无法响应点击

2 个答案: