Grow your CSS skills. Land your dream job.

Animate background-image with jQuery?

  • htl
    # June 28, 2008 at 2:27 am

    Hi all, I’m pleased to join CSS-Tricks with all of you. I wonder how I can animate the background-image of an element with jQuery. I have been trying to do that by using the animate function of jQuery but it didn’t work so well :cry:
    Here is my snippet of code:
    CSS:

    Code:
    #wrapper {
    width: 800px;
    height: 600px;
    position: relative;
    background: #92C87A url(“background.jpg”) -400px -200px no-repeat;
    margin: 0 auto;
    }

    JS:

    Code:
    $(“#move”).click(function(){
    $(“#wrapper”).animate({
    backgroundImage: “background.jpg”,
    backgroundPosition: “0px -400px”,
    backgroundRepeat: “no-repeat”
    }, 1000 );
    });

    I want the background to move cross the monitor, but actually it suddenly appeared at -400px -400px position and began to move from this to -400px -200px position.
    Please help me with this problem.
    Thank you very much!!!

    # June 28, 2008 at 12:55 pm

    Hi htl,

    Your going to need this.

    http://plugins.jquery.com/project/backgroundPosition-Effect

    Done some experimenting with this. Check this rollover.
    http://www.development.tobypitman.com/jquery/back-pos.html
    It animates the background of the li tag when you rollover the link.
    Don’t look in IE as the effect uses Transparent PNGs to get the effect. You can look at the source to see how i did it. Maybe that might help you out. Just include the above script to your page along with jQuery. You can’t do background animations without it to my knowledge.

    Note: Firefox needs you to declare the initial css background position value in the js. Like this.

    $(‘#wrapper’).css({backgroundPosition: ‘-200px -400px’});

    Your code should look a bit like this.

    $("#move").click(function(){
    $("#wrapper").animate({backgroundPosition: ‘(0px -400px)’}, 1000 );
    });

    Hope that puts you in the right direction. :D

    Tob

    htl
    # June 30, 2008 at 4:40 am

    Hi toby,
    Thank you very much! I have tried your solution anh it worked perfectly. I was a bit confused at first time because I hadn’t downloaded the code in the link you had given :mrgreen: .
    Again, thank you very much :D
    PS: This works on Firefox and Opera but have nothing to do with IE6. I should say it’s too cool for IE :P

    # July 31, 2008 at 5:19 am

    Is there a similar plugin available for using .animate with backgroundImage?

    So for example;

    function fadeImage(){ $(this).animate({backgroundImage: "image.jpg"}, 600);}

    ?

    # October 3, 2008 at 10:12 pm

    is the easing plugin necessary if i just want to animate the background image by just switching it? no fade,puff,slide etc necessary just a timed like background image switcher? i cant seem to find this info anywhere,thanks in advance!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".