Анимация непрозрачности при наведении курсора (jQuery)

У нас есть ссылка:

<a href="#">
    Some text
    <span style="width: 50px; height: 50px; background: url(image.png); overflow: hidden; opacity: 0;"></span>
</a>

И мы хотим изменить непрозрачность <span> с некоторой анимацией, когда ссылка зависает.

Как мы это сделаем?

ОТВЕТЫ

Ответ 1

Вот так:

$('a:has(span)').hover(
    function() { $('span', this).fadeIn(); },
    function() { $('span', this).fadeOut(); }
);

Ответ 2

Другое возможное решение:

$("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}); 
});

Ответ 3

Используйте . fadeTo():

$( 'a' ).hover(
    function() { $( this ).fadeTo( 'fast', '1'); },
    function() { $( this ).fadeTo( 'fast', '.4'); }
);

Демо: см. fiddle