Когда я нависаю над 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>
Кажется, я помню, что у меня была аналогичная проблема, когда я создавал этот сайт.
Решение состоит в использовании комбинации .hover()
и .stop()
чтобы гарантировать, что за один раз работает только одна анимация, что, я думаю, у вас есть. Кроме того, убедитесь, что изображение с надписью находится поверх другого изображения, и просто затухайте его. .mouseleave()
изображения получает "застревание", потому что при некоторой непрозрачности .mouseleave()
останавливает стрельбу, а .mouseenter()
начинает стрелять по другому изображению.
Что-то вроде:
$$ = $("#image1");
$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 1000);
}, function () {
$$.stop().animate({
opacity: 1
}, 1000);
});
#image1
должен быть выше #image2
чтобы это работало, #image1
исчезает, чтобы "раскрыть" #image2
за ним. Код использует .animate()
а не .fadeIn()
и .fadeOut()
но эффект тот же.
Edit-, чтобы исчезнуть в другом div после окончания анимации fadeoout, используйте полный вызов функции animate.
Что-то вроде:
$$ = $("#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 появятся над ними.
#image1
после #image2
гарантирует, что оно будет нарисовано поверх него. Я думаю, чтобы затем .animate()
другой элемент, используйте функцию обратного вызова .animate()
как и в другом ответе, см. Редактирование в моем ответе.
Вы должны использовать анимацию/переход в форме:
.fadeTo( duration, opacity, complete )
где complete
- функция обратного вызова.
Я не уверен, как вы пытаетесь это сделать, но я знаю, как это должно быть сделано. Попробуйте это http://jsfiddle.net/xy5dj/
Обязательно слушайте оба события на одном и том же элементе (предпочтительно, оберточный элемент). Обратите внимание, что fadeOut фактически удаляет элемент из отображаемого содержимого (display: none), следя за тем, чтобы события мыши не срабатывали над этим элементом.
Боковое примечание: грязный трюк, который я использовал однажды (если вам нужно это сделать, то вы делаете что-то не так) заключается в том, чтобы очистить стиль элемента после анимации, используя функцию обратного вызова функции анимации, т.е.
$('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')});