CODEWITHSUNDEEP
jqueryanimationhoveropacity
Happy
Happy

Reputation: 891

Animate opacity on hover (jQuery)

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?

Upvotes: 10

Views: 45682

Answers (3)

Nabil Kadimi
Nabil Kadimi

Reputation: 10424

Use .fadeTo():

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

Demo: see fiddle

Upvotes: 3

Raspo
Raspo

Reputation: 1087

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}); 
});

Upvotes: 46

SLaks
SLaks

Reputation: 888213

Like this:

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

Upvotes: 9

Related Questions