ansaurus

Question

Animate background image change with jQuery

Answer 1

+4 A:

I don't think this can be done using jQuery's animate function because the background image does not have the necessary CSS properties to do such fading. jQuery can only utilize what the browser makes possible. (jQuery experts, correct me if I'm wrong of course.)

I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.

Pekka 2010-06-06 11:13:15

so if the background image was one big image (like a sprite) I could then animate the moving / repositioning of this sprite using Anmiate?

Jonathan Lyon 2010-06-06 11:15:22

@Jonathan - Yes, by animating `background-positon`, like this: http://snook.ca/technical/jquery-bg/

Nick Craver 2010-06-06 11:16:15

@Nick good link! @Jonathan what I meant went more in the direction of having two `div`s underneath each other, and fading one of them out or in. (If you are looking to *fade* the images.) the animation method is certainly easier.

Pekka 2010-06-06 11:34:37

+1 for that link. I started using that plugin some time ago and it just rocks that i can now animate background images! :) See one of my latest bg animations here: http://mashinaizec.com/ where i am animating this image: http://mashinaizec.com/css/images/nav_background.png

GaVrA 2010-06-06 11:35:49

hi guys I have created one big image that can be moved by using background-position:0px -600px for the second list item, then background-position:0px -1200px; for the third list item etc but I can't trigger this in the javascript using the hover event of each list item to animate and move the background image of homepage_container - any ideas? this is the bg image http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/homepageimages.jpg

Jonathan Lyon 2010-06-06 11:51:28

@Jonathan why not, what doesn't work?

Pekka 2010-06-06 11:52:32

I'm just not sure how to write it in javascript

Jonathan Lyon 2010-06-06 11:53:21

@Jonathan maybe the source code of the example @Nick linked to helps? It contains full `animate` statements, do those come close to what you're looking for?

Pekka 2010-06-06 11:56:35

I think I have done it correctly but can't get it to work $("ul#frontpage li#277 a").hover( function () { $('#homepage_container').stop().animate({backgroundPosition:"(0 -1200)"}, {duration:500}); },function () { $('#homepage_container').stop().animate({backgroundPosition:"(0 0)"}, {duration:500});; } );

Jonathan Lyon 2010-06-06 12:03:26

@Jon you are missing the `px` unit values in the backgroundPositions.

Pekka 2010-06-06 12:11:52

Thanks Pekka - It could have been that or not linking to the bgpos.js file properly - anyhow it's working now http://www.thebalancedbody.ca/ - however, I would rather have it FADE into each image rather than slide. Any ideas?

Jonathan Lyon 2010-06-06 12:49:27

@Jon as I said, you won't be able to fade that way. See whether @XGreen's approach works for you.

Pekka 2010-06-06 12:59:29

Answer 2

+1 A:

<style type="text/css">
    #homepage_outter { position:relative; width:100%; height:100%;}
    #homepage_inner { position:absolute; top:0; left:0; z-index:10; width:100%; height:100%;}
    #homepage_underlay { position:absolute; top:0; left:0; z-index:9; width:800px; height:500px; display:none;}
</style>

<script type="text/javascript">
    $(function () {

        $('a').hover(function () {

            $('#homepage_underlay').fadeOut('slow', function () {

                $('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg")' });

                $('#homepage_underlay').fadeIn('slow');
            });

        }, function () {

            $('#homepage_underlay').fadeOut('slow', function () {

                $('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg")' });

                $('#homepage_underlay').fadeIn('slow');
            });


        });

    });

</script>


<body>
<div id="homepage_outter">
    <div id="homepage_inner">
        <a href="#" id="run">run</a>
    </div>
    <div id="homepage_underlay"></div>
</div>

XGreen 2010-06-06 11:57:59

ansaurus

tags:

views:

answers:

Animate background image change with jQuery

related questions