У нас есть ссылка:
<a href="#">
Some text
<span style="width: 50px; height: 50px; background: url(image.png); overflow: hidden; opacity: 0;"></span>
</a>
И мы хотим изменить непрозрачность <span> с некоторой анимацией, когда ссылка зависает.
Как мы это сделаем?
Вот так:
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); }
);
Другое возможное решение:
$("a span").hover(function(){
$(this).stop().animate({"opacity": 1});
},function(){
$(this).stop().animate({"opacity": 0});
});
Если вы используете fadeOut(), диапазон будет сваливаться, таким образом он не будет
ИЗМЕНИТЬ
Это намного лучше:
$('a:has(span)').hover(function() {
$('span', this).stop().animate({"opacity": 1});
},function() {
$('span', this).stop().animate({"opacity": 0});
});
$( 'a' ).hover(
function() { $( this ).fadeTo( 'fast', '1'); },
function() { $( this ).fadeTo( 'fast', '.4'); }
);