Question

We have a link:

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

And we want to change opacity of <span> with some animation, when the link is hovered.

How would we do it?

Answer 1

Like this:

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

Answer 2

Another possible solution:

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

If you use fadeOut(), the span will collapse, this way it won t

EDIT

This is much better:

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

Answer 3

Use .fadeTo():

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

Use .fadeTo():

Demo: see fiddle

友情链接