如何在另一个开始之前定位并结束jquery事件？

Question

我有一个网页有一个缓慢和戏剧性的初始负载，其中标题出现在3个部分。我也有一些标签，当点击时将当前“页面”上的内容过渡到新的“页面”内容。因此，如果在初始标题转换完成之前单击一个标签，它们会重叠并且事情变得混乱。我尝试过使用stop（）并完成（），但我不确定将它们放在哪里。我想我想要做的是指定当点击一个选项卡时，在启动其他动画之前立即完成初始动画。不过，我甚至不知道如何定位该动画。

初始头动画：

$.fn.topSlide1 = function() { 
 
    setTimeout (function() 
 
       { 
 
    $('.part1').delay(1000).animate({ opacity: '1' }, 'slow'); 
 
    setTimeout (function() { 
 
     $('.part2').delay(1000).animate({ opacity: '1'}, 'slow'); 
 
     setTimeout(function() { 
 
     $('.part3').delay(1000).animate({ opacity: '1' }, 'slow'); 
 
     }, 1100); 
 
    }, 1100); 
 

 
    }, 1100); 
 

 

 
    return this; 
 

 
}

我要点击标签动画如果该初始页还是正在显示的一个：

if (current == '#mag1') 
 

 
{ 
 
    /*Stop animation code here??*/ 
 

 
    /*Starts the fading away transition*/ 
 
    $('.part1').animate({ opacity:'0'}, 'slow'); 
 
    $('.part2').animate({ opacity:'0'}, 'slow'); 
 
    $('.part3').animate({ opacity:'0'}, 'slow'); 
 
    $('.bio').fadeDown(); 
 

 
    /*Slides up new page*/ 
 
    $(id).fadeUp(); 
 
    current = id; 
 

 
}

Answer 1

只需调用一个函数在最后 - 这样

$('.part1').animate({ 
    opacity: 0 
}, 'slow', function() { 
    //todo if animation finished 
    alert('end'); 
}); 

Answer 2

既然你已经有了一个单击处理程序，你应该能够调用.stop你开始你的下一个动画之前。止动接受一个参数跳转到动画结束，所以我会尝试：

if (current == '#mag1') 

{ 
    /*       clearQueue, jumpToEnd*/ 
    $('.part1, .part2, .part3').stop(true, true); 

    /*Starts the fading away transition*/ 
    $('.part1').animate({ opacity:'0'}, 'slow'); 
    $('.part2').animate({ opacity:'0'}, 'slow'); 
    $('.part3').animate({ opacity:'0'}, 'slow'); 
    $('.bio').fadeDown(); 

    /*Slides up new page*/ 
    $(id).fadeUp(); 
    current = id; 

} 

jQuery.stop：https://api.jquery.com/stop/

的jsfiddle实施例：https://jsfiddle.net/rf1y60xz/1/

$(document).ready(function() { 
// Fade in slow 
    $('.move').animate({opacity: 1}, 5000); 
    $('button').on('click', function() { 
     $('.move').stop(true, true); 
    // Fade out, do other things 
    $('.move').animate({opacity: 0}); 
    }) 
}); 

略多人为的例子，等待不透明动画完成，然后移动另一个框。

https://jsfiddle.net/rf1y60xz/2/

$(document).ready(function() { 
// Fade in slow 
    $('.move').animate({opacity: 1}, 5000); 
    $('button').on('click', function() { 
     $('.move').stop(true, true); 
    // Fade out, do other things 
    $('.move').animate({opacity: 0}, function() { 
     $('.move2') 
     .css('opacity', 1) 
     .animate({left: 400}); 
    }); 
    }) 
});