jquery - .hide() 有效，但随后显示以前的动画？

Question

我有一个问题，我的动画工作完美，但是当 .hide(); 时被触发它只是恢复到slideDown();功能。

我对此摸不着头脑，尽管我假设它正在运行动画，因为之前的点击仍然处于事件状态？

$('div.SocialShareJob').on('click', function(){
    $(this).find('p').slideUp(300).fadeOut(500);
    $(this).find('.Icons').slideDown(500).fadeIn(900);
});
$('div.CloseSharing').on('click', function(){
    $(this).parent('div.Icons').hide(); 
});

Answer 1

您需要stop尚未完成的动画，并清除队列:

$('div.CloseSharing').on('click', function(event){
    $(this).parent('div.Icons').stop(true).hide(); 
});

如果 closeSharing div 是另一个 div 的子级，您可能还需要阻止 click 事件传播到父级。为此，请将 event.stopPropagation() 添加到事件处理程序的开头:

$('div.CloseSharing').on('click', function(event){
    event.stopPropagation();
    $(this).parent('div.Icons').stop(true).hide(); 
});