Animated PNG background with Javascript, but without loop?

I need help with an animated PNG in Javascript.

I found how to animate a PNG background with Javascript here on Stack Overflow. But my problem is that I only need the animation onmouseover and onmouseout开发者_开发问答. And the animation should play only once, not in a loop, so when the user moves the mouse over a div the the animation in the background should play once and stop at the last frame, but when the user goes off the div, a reverse animation should play once and stop at the last (first) frame. The script I found here is:

The style:

#anim {
  width: 240px; height: 60px;
  background-image: url(animleft.png);
  background-repeat: no-repeat; 
}

The HTML:

<div id="anim"></div>

Javascript:

var scrollUp = (function () {
  var timerId; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

I hope anyone can help me, Thank you

To stop the animation after the first set of frames you do want to change the if condition to not reset the counter to zero but instead to clear the interval and stop it from reoccuring.

To only let it play when you enter an element you can attach the animation function as an event listener and play the whole thing in reverse with another function that you plug into your onmouseout event.

Depending on your target browser and since your question is fairly vague I can recommend two alternatives to you:

Use jQuery animate (all browsers, include ref to jquery)

//Animate to x,y where x and y are final positions

$('#anim').mouseenter(function(e) {
    $(this).animate({background-position: x + 'px ' + y + 'px'}, 4200);
})

//Do same for mouseleave

Use a css3 animation (using -webkit browser here)

<style>
    @-webkit-keyframes resize {

      100% {
         height: 123px;
      }
    }               

    #anim:hover {       
       -webkit-animation-name: resize;
       -webkit-animation-duration: 4s;
    }

I would choose option 2 if you are doing mobile development or can choose only css3 capable browsers.