如何停止的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