1
\$\begingroup\$

I've just implemented a background animate on some social media icons where the image goes from grey to color on :hover.

I wanted to know if there's a better way to write the following but also implement a fade, so as the background animates, it's also fading in on hover.

    <script type="text/javascript">

$(function(){
    $('#facebook')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-63px 0px)"}, {duration:150})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:150})
        })
    $('#twitter')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-63px 0)"}, {duration:150})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:150})
        })
});
</script>
\$\endgroup\$

3 Answers 3

Reset to default
1
\$\begingroup\$

I wanted to know if there's firstly a better way to write the following

Well, not much to be improved but you can simplify things a little bit using hover()

$('#facebook')
.css('background-position', '0 0')
.hover(function () {
    $(this).stop().animate({
        'background-position' : '(-63px 0px)'
    }, 150);
}, function () {
    $(this).stop().animate({
        'background-position' : '(0 0)'
    }, 150);
});

implement a fade so as the background animates it's also fading in on hover

Your best bet is to implement it with two separate images instead of a sprite. You absolute position each image on top of each other, animate their top for the moving effect, and then fadeIn()|fadeOut().

\$\endgroup\$
0
1
\$\begingroup\$

Instead of calling mouseover and mouseout separately, you can use hover() which takes care of this for you. Also, as both elements have the same code being executed you could employ DRY principles and group their selectors to use one block of code. Try this:

$("#facebook, #twitter").css("backgroundPosition", "0 0")
    .hover(function() {
        // mouseenter
        $(this).stop().animate({backgroundPosition:"(-63px 0px)"}, {duration:150})
    },
    function() {
        // mouseleave
        $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:150})
    });

With regards to the fading in of the image, you would need to have a separate hidden img element above the element which fades in as you cannot put animation on the CSS background property.

\$\endgroup\$
2
  • \$\begingroup\$ This is brilliant, thanks, much cleaner. Is there a way to as well a the animate, get a fade + the animate on hover? Or would i need a seprate block of code for this? \$\endgroup\$ Commented Feb 20, 2012 at 11:01
  • \$\begingroup\$ This was a massive help, but for what i need i'm using the above suggestion of two images instead of a sprite, absolute positioning. But as ever I'm very grateful for the help. Thanks again \$\endgroup\$ Commented Feb 20, 2012 at 11:20
1
\$\begingroup\$

You can do this CSS and JQuery:

CSS

#facebook{
    background:url('/path/to/fb/icon/icon.png') no-repeat 0 0;
}

#twitter{
    background:url('/path/to/twitter/icon/icon.png') no-repeat 0 0;
}

Then in your JQuery code you can do the following:

$(document).ready(function(){
    $('#facebook, #twitter').hover(function(){
        $(this).stop().animate({'backgroundPosition':'-63px 0'}, 150);
    }, function(){
        $(this).stop().animate({'backgroundPosition':'0 0'}, 150);
    });
});
\$\endgroup\$

You must log in to answer this question.