Background animation
Background animation
An example of what i want to achive is at
www.mhauken.no/telling.html
- but with an easier and better code. When you click the button it moves a background image up in sequences and the reverse when you click again. The code that I'm using is:
-
$(document).ready(function(){
$(".run").toggle(function(){
$("#box")
.animate({backgroundPosition: '0px -26px'}, "fast")
.animate({backgroundPosition: '0px -52px'}, "fast")
.animate({backgroundPosition: '0px -78px'}, "fast")
.animate({backgroundPosition: '0px -104px'}, "fast")
.animate({backgroundPosition: '0px -130px'}, "fast")
.animate({backgroundPosition: '0px -156px'}, "fast")
.animate({backgroundPosition: '0px -182px'}, "fast");
return false;},
function(){
$("#box")
.animate({backgroundPosition: '0px -156px'}, "fast")
.animate({backgroundPosition: '0px -130px'}, "fast")
.animate({backgroundPosition: '0px -104px'}, "fast")
.animate({backgroundPosition: '0px -78px'}, "fast")
.animate({backgroundPosition: '0px -52px'}, "fast")
.animate({backgroundPosition: '0px -26px'}, "fast")
.animate({backgroundPosition: '0px 0px'}, "fast")
return false;
});
});
It works as I want, but there must be an easier way to do this? I have to apply this 18 times on the same site, and they all have to stop at different values.
Basically what I am asking for is the button to tell the background-image to move -26px * x times, and when you click the button again tell the background-image to move +26px *x times.