Неоднократное наведение на изображение заставляет "мышиный центр" записывать каждое наведение и постоянно исчезает и исчезает.
У меня есть этот простой код, настроенный так, чтобы, когда я mouseenter
изображение, изображение исчезает, и некоторая текстовая информация исчезает. Моя проблема в том, что когда я очень быстро наводю курсор на изображение назад и вперед, он записывает каждый mouseenter
и постоянно исчезает и исчезает столько раз, сколько моя мышь зависла над изображением. Есть ли способ остановить это поведение?
$('article').mouseenter(function(e) {
$(this).children('img').fadeTo(500, 0.4);
$(this).children('.post-info').fadeIn(500);
}).mouseleave(function(e) {
$(this).children('img').fadeTo(500, 1);
$(this).children('.post-info').fadeOut(500);
});
1 ответ
Решение
.stop() - это решение
Проще говоря, вы просто добавляете .stop()
перед каждой исчезающей анимацией.
$('article').mouseenter(function(e) {
$(this).children('img').stop().fadeTo(500, 0.4);
$(this).children('.post-info').stop().fadeIn(500);
}).mouseleave(function(e) {
$(this).children('img').stop().fadeTo(500, 1);
$(this).children('.post-info').stop().fadeOut(500);
});
В качестве бонуса. Вот как бы я написал этот код:
$('article').on("mouseenter mouseleave", function( e ) {
// mouseenter variable returns true if mouseenter event is occurring
// and it returns false if event is anything but mouseenter.
var mouseenter = e.type === "mouseenter",
$this = $(this),
img = $this.children('img'),
postInfo = $this.children('.post-info');
// Both of these use ternary if statements that are equal to:
// if ( mouseenter ) { var imgFade = 0.4; } else { var imgFade = 1; }
// if ( mouseenter ) { var postInfoFade = 'fadeIn'; } else { var postInfoFade = 'fadeOut'; }
var imgFade = mouseenter ? 0.4 : 1,
postInfoFade = mouseenter ? 'fadeIn' : 'fadeOut';
img.stop().fadeTo( 500, imgFade );
postInfo.stop()[ postInfoFade ]( 500 );
});