如何停止的jQuery排队动画效果

Question

我有一个简单的jQuery悬停动画：

jQuery(function($) { 
$('.category').hover(function(){ 
    $(this).find('.banner').fadeIn(); 
    },function(){ 
    $(this).find('.banner').fadeOut(400); 
}); 
}); 

这一切确实是当有人悬停在.category元素，横幅DIV淡入和淡出。简单。

我的问题是，我有.category元素大约十，如果有人在它们之间移动过快或关闭，在同一个多次的jQuery排队动画和不断使他们出现，消失，直到它赶上了。

有没有简单的方法来阻止这种情况的发生？

我看到了另一个问题，建议添加.stop，但这不起作用。动画完全停止工作，或者如果我多次移动鼠标，动画只有一半褪色。

在此先感谢

Answer 1

你可以把你fadeOut和fadeIn使用.animate()的选项来阻止动画排队。

$('.category').hover(function() { 
    $(this).find('.banner').show().animate({ 
     opacity: "show" 
    }, { 
     queue: false 
    }); 
}, function() { 
    $(this).find('.banner').animate({ 
     opacity: "hide" 
    }, { 
     queue: false, 
     duration: 400 
    }); 
}); 

Code example on jsfiddle