Используйте события mouseenter
и mouseleave
вместо mouseover
/ mouseout
.
jQuery(document).ready(function($) {
$('.btn-rollover .text').bind('mouseenter', function(){
$(this).closest('.btn-rollover').find('.overlay').stop().fadeOut();
}).bind('mouseleave', function(){
$(this).closest('.btn-rollover').find('.overlay').stop().fadeIn();
});
});
Обратите внимание, я также добавил .stop()
непосредственно перед вызовами анимации (.fadeOut()
и .fadeIn()
).Это остановит текущую анимацию перед вызовом следующей.Вместо того, чтобы помещать анимацию в очередь одну за другой, текущая анимация будет остановлена, а новая будет запущена немедленно.