I am attempting to create a simple animation by shifting the background position (frames) of the image which serves as the background for my div. Utilizing Jquery, I aim to animate this effect. The background image consists of 6 frames, with the first frame starting at 0,0px, the second at 85px,0, and so forth. My goal is to smoothly transition between these frames until the stop button is clicked. Below, you can find my jquery code. Within the code, I have set up an array to track the number of pixels to move across. Each frame should maintain a duration of 1000 milliseconds before transitioning to the next frame. Despite my efforts, there seems to be an error in my implementation that I can't seem to identify. Take a look at my code snippet:
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
}
}