Передайте true на ваш остановочный вызов, чтобы очистить анимацию, или true, true, чтобы очистить очередь и немедленно завершить анимацию:
.stop(true, true)
Кроме того, вы должны передать в обработчик наведения две функции - что происходит при вводе мыши, затем что происходит при отпускании мыши - если вы хотите, чтобы он снова появился (или исчез - независимо от желаемого поведения), он должен перейти во вторую функцию .
$("#gallery ul li img").mouseenter(function(){
var currentImg = $('#main-img').attr('src');
var targetImg = $('this').attr('src').replace('thumb/', '');
if (currentImg !== targetImg) {
$('#main-img')
.stop(true)
.fadeTo(0,0)
.attr('src', targetImg)
.fadeTo('normal', 1);
}
});
Итак, для начала нужно проверить, не является ли изображение, на которое наведено изображение, уже не миниатюрой большого изображения - не нужно делать анимацию затухания здесь. Если это не так, остановите и очистите очередь анимации (чтобы предотвратить накапливание анимации при быстром зависании), мгновенно уменьшите текущее большое изображение до 0 непрозрачности (сделайте его невидимым), измените большое изображение на изображение, представленное миниатюрой, затем постепенное увеличение общей картинки. Скорость постепенного появления в настоящее время установлена на «нормальную», но это может быть «медленная», «быстрая» или некоторая величина в миллисекундах, если вы хотите поэкспериментировать с ней. Gone - это функция парения, так как вам не нужно поведение при отпускании мышью.