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:
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!!!
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.
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
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!