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

Question

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

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

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

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

Answer 1

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

$("a span").hover(function(){
    $(this).stop().animate({"opacity": 1});
},function(){
    $(this).stop().animate({"opacity": 0});
});

Если вы используете fadeOut (), диапазон разрушится, таким образом, он не будет

EDIT

Это намного лучше:

$('a:has(span)').hover(function() { 
    $('span', this).stop().animate({"opacity": 1}); 
},function() { 
    $('span', this).stop().animate({"opacity": 0}); 
});

Answer 2

Как это:

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

Answer 3

Использование .fadeTo () :

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

Демонстрация: см. скрипка