使用JavaScript的動畫PNG背景，但沒有循環？

Question

我需要Javascript中的動畫PNG幫助。

我發現如何在這裏堆棧溢出動畫一個PNG背景的JavaScript。但我的問題是，我只需要動畫onmouseover和onmouseout。動畫只能播放一次，不能循環播放，所以當用戶將鼠標移動到div上時，後臺動畫應播放一次並停留在最後一幀，但當用戶關閉div時，動畫應播放一次，並在最後（第一個）幀停止播放。我發現這裏的腳本是：

風格：

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

的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')) 

我希望有人能幫助我，謝謝

Answer 1

停止生命在第一組幀之後，您確實想要更改if條件以不將計數器重置爲零，而是清除間隔並停止重新分配。

要只讓當你進入你可以將動畫功能作爲一個事件偵聽器，並反向與您插入到你的onmouseout事件的另一個功能發揮整個事情的元素玩耍。

Answer 2

取決於你的目標瀏覽器，因爲你的問題是相當模糊的，我可以推薦兩種選擇給你：

使用jQuery animate（所有的瀏覽器，包括裁判的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 

使用css3 animation（在此處使用-webkit瀏覽器）

<style> 
    @-webkit-keyframes resize { 

     100% { 
     height: 123px; 
     } 
    }    

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

如果你正在做移動開發我會選擇選項2或只能選擇CSS3功能的瀏覽器。