JQuery непрозрачность проблема с FadeIn и FADEOUT

Question

http://dl.dropbox.com/u/921159/desktopography/index.html

Я строем обои блог и пытаюсь использовать JQuery, чтобы показать/скрыть ссылку загрузки (я новичок). Проблема в том, что если вы наведите курсор мыши на изображение и позвольте ссылке затухать, то быстро отскочите и вернитесь, пока он исчезает ... ссылка остановится на непрозрачности, в которой она сейчас находится. Это заканчивается проблемой, когда пользователь случайно нависает над изображениями, а непрозрачность застряла на 0. Что вызывает это?

Answer 1

clearQueue в методе по умолчанию анимации .stop() к false (see API), но вы хотите быть true, потому что вы хотите, чтобы текущая анимацию, чтобы очистить и он начать новую парение государственной анимации. Измените код следующим образом:

$(function() { 
    $('.wallpaper').hover(function() { 
     $(this).children('p').stop(true, true).fadeIn(300); 
    }, function() { 
     $(this).children('p').stop(true, true).fadeOut(400); 
    }); 
}); 

Answer 2

Посмотрите на метод .stop(). Он предназначен для устранения этих проблем.

Answer 3

Это результат того, что вы используете stop()^(docs), чтобы остановить анимацию и повернуть его вспять. Проблема в том, что следующая функция затухания запоминает остановленную точку и использует ее.

Вместо этого вы можете использовать fadeTo()^(docs), чтобы вы могли исправить цели непрозрачности на 1 и 0.

$('.wallpaper').hover(function() { 
    $(this).children('p').stop().fadeTo(300, 1); 
}, function() { 
    $(this).children('p').stop().fadeTo(400 ,0); 
}); 

---

РЕДАКТИРОВАТЬ: Эквивалентная с помощью animate()^(docs) является:

$('.wallpaper').hover(function() { 
    $(this).children('p').stop().animate({opacity:1}, 300); 
}, function() { 
    $(this).children('p').stop().animate({opacity:0}, 400); 
}); 

Обратите внимание, что ни один из них будет установлен display:none в конце. Если вы этого хотите, вам нужно сделать это вручную.

$('.wallpaper').hover(function() { 
    $(this).children('p').show().stop().fadeTo(300, 1); 
}, function() { 
    $(this).children('p').stop().fadeTo(400 ,0, function(){$(this).hide()}); 
}) 
    .children('p').css('opacity',0);