jQuery hover stuck

Question

Когда я нависаю над img, который исчезает до другого img и слишком быстро перетекает, fadeOut застревает и исчезает. Я пробовал .stop(), как я видел в других ответах, но все равно не сработает. Есть ли что-то еще, что я могу поставить вместо .stop()?

<div class="grid big-square"> 
    <a href="#"><img id="image2" src="img/fade/creo.png"> 
    <img id="image1" src="img/creo.jpg"></a> 
</div> 

<script> 
$("#image1").mouseenter(function() { 
    $(this).stop(true, true).fadeOut(1000); 
}); 

$("#image2").mouseleave(function() { 
    $("#image1").stop(true, true).fadeIn(500); 
}); 
</script> 

Answer 1

Кажется, я помню, что с подобной проблемой, когда я создавал this сайт.

Решение должно использовать комбинацию .hover() и .stop(), чтобы гарантировать, что работает только одна анимация за один раз, что, я думаю, у вас есть. Кроме того, убедитесь, что изображение с надписью находится поверх другого изображения, и просто затухайте его. Затухание изображения становится «застревающим», потому что при некоторой непрозрачности .mouseleave() прекращает стрельбу, а .mouseenter() начинает стрелять по другому изображению.

Что-то вроде:

$$ = $("#image1"); 
$$.hover(function() { 
    $$.stop().animate({ 
     opacity: 0 
    }, 1000); 
}, function() { 
    $$.stop().animate({ 
     opacity: 1 
    }, 1000); 
}); 

#image1 должна быть выше #image2 для этого, чтобы работать, #image1 затухает на 'раскрыть' #image2 позади него. Код использует .animate(), а не .fadeIn() и .fadeOut(), но эффект тот же.

Редактировать- Чтобы исчезнуть в другом div после окончания анимации fadeoout, воспользуйтесь полным обратным вызовом функции анимации.

Что-то вроде:

$$ = $("#image1"); 
$$.hover(function() { 
    $$.stop().animate({ 
     opacity: 0 
    }, 1000); 
}, function() { 
    $$.stop().animate({ 
     opacity: 1 
    }, 1000, function() { 
     $("#finalDiv").animate({ opacity: 1, 500 }); 
    }); 
}); 

#finalDiv должен быть после того, как 2 <img />s в вашем HTML, чтобы появиться над ними.

Answer 2

Я не уверен, как вы пытаетесь это сделать, но я знаю, как это должно быть сделано. Попробуйте это http://jsfiddle.net/xy5dj/

Обязательно слушайте оба события на одном и том же элементе (предпочтительно, оберточный элемент). Обратите внимание, что fadeOut фактически удаляет элемент из визуализированного содержимого (display: none), следя за тем, чтобы события мыши не срабатывали над этим элементом.

Примечание стороны: Грязный трюк, который я использовал один раз (если вы должны сделать это, то, что вы делаете что-то неправильно), чтобы очистить стиль элемента после анимации с использованием обратного вызова способности функции одушевленной, т.е.

$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')}); 

Answer 3

fiddle

Вы должны использовать анимация/переход в форме:

.fadeTo(duration, opacity, complete) 

где complete - функция обратного вызова.