Автоматически оживлять все состояния наведения с помощью jQuery

Question

На моем новом сайте у меня есть несколько разных состояний зависания для ссылок. Один своп фонового изображения для логотипа. Один разбрасывает другое фоновое изображение для основного навигатора. И обычные встроенные ссылки меняют цвета фона через CSS. Я не могу найти способ автоматически иметь все теги анимировать изящно для их состояния зависания.

Не кажется, что это очень чисто (или в будущем), чтобы вручную кодировать методы анимации для каждого из этих типов ссылок. Не похоже, чтобы мои URL-адреса фонового изображения и цвета ссылок (которые должны быть в CSS) помещались в JS. И не кажется правильным создавать специальный класс для каждого экземпляра эффекта зависания, а затем анимировать добавление/удаление этого класса через jQuery, когда может быть способ использовать поведение по умолчанию hover, которое предоставляет CSS.

Так что я просто хотел бы знать, есть ли какой-нибудь способ получить JQuery (с или без JQuery UI) для кроссфейд между и : с парить состояния, которые уже определены в моем CSS. Все состояния a: hover работают так, как ожидалось, но переход слишком внезапный, и я хочу добавить переход затухания между состоянием hover/non-hover каждого элемента.

Любые предложения? Вот один из примеров CSS при наведении состояний, где я хотел бы, чтобы оживить переход:

#logo a, #logo a:visited { 
background: url('logo_black.png'); 
} 
#logo a:hover { 
background: url('logo_white.png'); 
} 

Answer 1

Реальный способ сделать это с помощью CSS переходов (https://developer.mozilla.org/en/CSS/CSS_transitions), которые позволяют браузер обрабатывать всю анимацию между двумя для вас.

Однако они еще не поддерживаются ни в каком другом браузере, кроме Webkit (хотя они предназначены для Firefox 4).

Если вы хотите, чтобы они работали в других браузерах вы можете посмотреть в использовании плагина JQuery, такие как: http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/

Лично я рекомендовал бы не их реализацию в JavaScript на всех, и пусть браузеры, которые не делают поддержка переходов ухудшается изящно. Хотя сегодня у вас не будет отличной поддержки браузеров, вы со временем и без каких-либо дополнительных усилий с вашей стороны.

Прогрессивное улучшение - лучший друг веб-разработчика. Особенно в этот день и в возрасте новых технологий, новых устройств и новых браузеров выходят каждую неделю.

Answer 2

Я заканчивал тем, что с чем-то вроде этого:

$('#logo, #left_nav li').css({ opacity: 0.6 }); 

$('#logo, #left_nav li').hover(function(){ 
    $(this).stop().animate(); 
    $(this).animate({ opacity: '0.99'}, 250);  
    },function(){ 
    $(this).stop().animate(); 
    $(this).animate({ opacity: '0.6'}, 250);   
}); 

Фоновое изображение этих элементов 33% прозрачный.

Я установил непрозрачность для каждого элемента в 0.6 (на document.ready), чтобы получить прозрачность 20%. Логотип был изменен, чтобы иметь определенную непрозрачность относительно этого значения.

При наведении курсора, я устанавливаю непрозрачность обратно к полному значению и анимирую изменение. Логотип исчезает до 100% непрозрачности, фон исчезает до 33% непрозрачности. Также есть некоторый код stop(), чтобы предотвратить нежелательную цепочку эффектов.

Я добавлю что-то подобное для встроенных текстовых ссылок. Недостаточно кода, чтобы беспокоить меня, особенно если нет более чистого способа получить тот же эффект от всех ссылок в jQuery.