Hi I'm trying to animate a background image using jQuery, I tried following this tutorial here, however I've had no luck with my test page, I see the blue Facebook icon, but on mouse over it does not animate upwards to reveal the gray logo. Please help! Thanks, I'm a jQuery noob.

My test page: /

The Facebook icon should animation upwards, the full image below:

My CSS

<style>
    #facebook_icon li {
        padding: 0;
        width: 120px;
        height: 119px;
        list-style: none;
        background: red;
        background:url('img/fb_120x238.png') repeat 0 0;
    }
</style>

HTML

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

Javascript

<script src=".8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>

<script>

    (function() {
        $('#facebook_icon li')
            .css( {backgroundPosition: "0 0"} )
            .mouseover(function(){
                $(this).stop().animate(
                    {backgroundPosition:"(0 -119px)"},
                    {duration:500})
                })
            .mouseout(function(){
                $(this).stop().animate(
                    {backgroundPosition:"(0 0)"}, 
                    {duration:500})
                })
    })();

</script>

UPDATE: WORKING CSS 3 Solution

CSS 3

#facebook_icon li {
        padding: 0;
        width: 120px;
        height: 119px;
        list-style: none;
        background: red;
        background:url('img/fb_120x238.png') repeat 0 0;

        -moz-transition: background-position 1s;
        -webkit-transition: background-position 1s;
        -o-transition: background-position 1s;
        transition: background-position 1s;
        background-position: 0 0;
    }

    #facebook_icon li:hover{
        background-position: 0 -119px;
    }

    .box {
        width: 120px;
        height: 119px;
    }

HTML (Added empty div box to have something to click on)

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

Hi I'm trying to animate a background image using jQuery, I tried following this tutorial here, however I've had no luck with my test page, I see the blue Facebook icon, but on mouse over it does not animate upwards to reveal the gray logo. Please help! Thanks, I'm a jQuery noob.

My test page: http://leongaban./_stack/bg_animation/

The Facebook icon should animation upwards, the full image below:

My CSS

<style>
    #facebook_icon li {
        padding: 0;
        width: 120px;
        height: 119px;
        list-style: none;
        background: red;
        background:url('img/fb_120x238.png') repeat 0 0;
    }
</style>

HTML

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

Javascript

<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>

<script>

    (function() {
        $('#facebook_icon li')
            .css( {backgroundPosition: "0 0"} )
            .mouseover(function(){
                $(this).stop().animate(
                    {backgroundPosition:"(0 -119px)"},
                    {duration:500})
                })
            .mouseout(function(){
                $(this).stop().animate(
                    {backgroundPosition:"(0 0)"}, 
                    {duration:500})
                })
    })();

</script>

UPDATE: WORKING CSS 3 Solution

CSS 3

#facebook_icon li {
        padding: 0;
        width: 120px;
        height: 119px;
        list-style: none;
        background: red;
        background:url('img/fb_120x238.png') repeat 0 0;

        -moz-transition: background-position 1s;
        -webkit-transition: background-position 1s;
        -o-transition: background-position 1s;
        transition: background-position 1s;
        background-position: 0 0;
    }

    #facebook_icon li:hover{
        background-position: 0 -119px;
    }

    .box {
        width: 120px;
        height: 119px;
    }

HTML (Added empty div box to have something to click on)

<ul id="facebook_icon">
    <li><a href="#"><div class="box"></div></a></li>
</ul>

• javascript
• jquery
• html
• css
• jquery-animate

Share Improve this question Follow edited Nov 28, 2012 at 15:42 Leon Gaban asked Nov 28, 2012 at 15:23 Leon GabanLeon Gaban 39.1k122122 gold badges349349 silver badges550550 bronze badges 6

• 1 You can also use CSS3 transition. – Ram Commented Nov 28, 2012 at 15:27
• why is your li in your a? Turn it the other way around. – Sven Bieder Commented Nov 28, 2012 at 15:29
• You have an li in your anchor. – Sven van Zoelen Commented Nov 28, 2012 at 15:29
• have you tried mouseenter() and mouseleave() instead? – Sven Bieder Commented Nov 28, 2012 at 15:29
• 1 first of all, you don't need {duration:500}. You can just pass 500. api.jquery./animate – lbstr Commented Nov 28, 2012 at 15:32

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

A simple solution should be using the css3 transition. You can do something like this:

In Your CSS

#facebook_icon li{
    -moz-transition: background-position 1s;
    -webkit-transition: background-position 1s;
    -o-transition: background-position 1s;
    transition: background-position 1s;
    background-position: 0 0;
}

#facebook_icon li:hover{
     background-position: 0 -119px;
}

This one is thankfully pretty simple. You are animating background-position on the anchor, but the actual image is on the li.

Just change your selector in your JavaScript:

 $('#facebook_icon li')

However, I'd remend changing your markup (and acpanying CSS) so the a is inside the li instead of a child of the ul. That way your markup is valid.

Update:

Hey, so I totally agree with using CSS3. Its exactly how I would implement that. But just to close out the question: To get the bgpos plugin working with jQuery 1.8.2, change the first two lines of the backgroundPosition method to this:

 if (fx.start === 0 && typeof fx.end == 'string') {
    var start = $.css(fx.elem,'backgroundPosition');