Есть много способов добиться этого эффекта, например, чистый CSS3-подход или JavaScript-подход, который вы выбрали. Если у вас есть особые требования к браузеру, то подход с JavaScript, вероятно, является лучшим вариантом.
Проблема в вашем существующем коде заключается в том, что события анимации будут запускаться непрерывно, пока курсор равен hovering. Вы должны посмотреть на события mouseenter() и mouseleave() jQuery, а также stop (), чтобы быстрый вход и выход из <a> не ставил в очередь много затухания / анимации.
Другая проблема, с которой вы столкнулись, заключается в том, что небылые <img> и зависшие <img> находятся рядом друг с другом. Это лучший способ сохранить простой и удобный HTML-код без эффекта зависания JavaScript. Поэтому используйте один тег <img> с неоткрытым src и манипулируйте src и непрозрачностью в JavaScript, чтобы создать эффект наведения.
Редактировать: Вот только один способ сделать это. Он работает на clone() сначала <img>, что из-за комбинации position:relative на родительском <a> и position:absolute на <img> размещает клона непосредственно поверх оригинала. Непрозрачность клона затем анимируется. Он опирается на ваши hovered изображения, всегда заканчивающиеся _MO. Это ненавязчивый способ сделать это, так как у пользователя без JavaScript (он все еще существует!) Будет чистый HTML HTML с одним изображением.
Альтернативным подходом может быть использование CSS-спрайтов , но вам все равно придется решить проблему исчезновения.
Существует множество браузеров, поддерживающих подход CSS3, Firefox 4+, Chrome, Safari, Opera, IE9. По моему опыту, ваша целевая аудитория часто диктует, какой подход используется, когда дело доходит до такого рода развития.
Редактировать 2: Уточнение кода & hellip;
$('#navigation li a img').each(function(index) {
$(this).clone().css({'opacity':0}).attr('src', $(this).attr('src').replace('.png','_MO.png')).appendTo($(this).parent());
});
& hellip; берет каждый <img> потомок <a>, сначала клонируя этот элемент <img>, затем устанавливает непрозрачность на 0 (скрытый), затем изменяет атрибут src клона на версию hovered изображения и затем добавление клонированного элемента DOM в качестве дочернего элемента родительского узла <img> s в DOM, который является <a>. Он использует jQuery chaining , но может быть записан явно как:
$('#navigation li a img').each(function(index) {
var clonedImgElement = $(this).clone();
var parentAnchorElement = $(this).parent();
var originalSrc = $(this).attr('src');
var hoveredSrc = originalSrc.replace('.png','_MO.png');
clonedImgElement.css({'opacity':0}); // hide clone first
clonedImgElement.attr('src', hoveredSrc); // update the src to the hovered version
clonedImgElement.appendTo(parentAnchorElement); // attach clone to anchor in DOM
});
Редактировать 3:
Вы также можете заменить код наведения на:
$('#navigation li a').mouseenter(function() {
$(this).find('img').filter(':last').stop().animate({'opacity':1});
}).mouseleave(function() {
$(this).find('img').filter(':last').stop().animate({'opacity':0});
});
, который согласно :last обеспечивает лучшую производительность.
Редактировать 4 Обновлен демо для работы с изображениями в других контейнерах, теперь размещайте только клоны, а не все изображения так, чтобы неперекрытые изображения все еще существуют в обычном потоке страниц, а также работают с изображениями не в top:0;left:0