重新啓動/刷新Javascript函數或計時器

Question

我在我的網站上有以下代碼....

此時，單擊「測試1」時，動畫開始。之後，點擊「測試2」或「測試3」後，動畫不會重新啓動...

如何在單擊任何鏈接時重新啓動動畫？

鏈接被點擊後，是否有可能淡出和淡入？

HTML標記：

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

</br> 
</br> 

<li id="item1"><span></span><a href="#">Test 1</a></li> 
<li id="item2"><span></span><a href="#">Test 2</a></li> 
<li id="item3"><span></span><a href="#">Test 3</a></li> 

CSS：

#anim { 
    width: 14px; height: 14px; 
    background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png); 
    background-repeat: no-repeat; 
} 

的Javascript：

var scrollUp = (function() { 
    var timerId, height, times ,i = 0 , element; 

    return { 
     stop : function(){ 
      clearInterval(timerId); 
     }, 
     init :function(h, t, el){ 
      height = h; 
      times = t; 
      element =el ; 
     }, 
     start : function () { 
      timerId = setInterval(function() { 
       if (i > times) // if the last frame is reached, set counter to zero 
       clearInterval(timerId); 
       element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up 
       i++; 
      }, 100); // every 100 milliseconds 
      } 
    }; 
})(); 

scrollUp.init(14, 40, document.getElementById('anim')); 

// start animation: 
document.getElementById('item1').addEventListener('click', function(){ 
    scrollUp.start(); 
}, false); 

這裏有一個小提琴：http://jsfiddle.net/ctF4t/3/

Answer 1

據我所知，你想要動畫（無論現在的狀態）重新啓動，如果其中一個按鈕被點擊？

嘛，如果是的話，你首先應該調用stop功能每次的start前：另外

document.getElementById('item1').addEventListener('click', function(){ 
    scrollUp.stop(); 
    scrollUp.start(); 
}, false); 

，該指數已在stop復位：

stop : function(){ 
    clearInterval(timerId); 
    i = 0; 
}, 

這樣做按鈕#item1的作業。 Here is a demo.把這個應用到其他人現在不應該是大麻煩。例如綁定事件到<body/>和讀取目標：

function startAnimation(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    target = target.parentNode; 

    if (!target.id.match(/item[0-3]/)) { 
     return e; 
    } 

    scrollUp.stop(); 
    scrollUp.start(); 
} 

document.body.addEventListener('click',startAnimation,false); 

Here is the complete demo.

Answer 2

我怎麼會重啓動畫被點擊任意鏈接的時候？

要定義restart，你要stop任何仍在運行的時間間隔，復位i到0因爲這標誌着 「開始」 和start一個新的時間間隔：

return { 
    // ... 

    restart: function() { 
     this.stop(); 
     i = 0; 
     this.start(); 
    } 
}; 

然後您需要綁定到每個li，以便它們都可以執行restart()：

var items = document.querySelectorAll('#item1, #item2, #item3'); 

for (var i = 0, l = items.length; i < l; i++) { 
    items[i].addEventListener('click', function() { 
     scrollUp.restart(); 
    }, false); 
} 

Answer 3

我改變了你的小提琴：http://jsfiddle.net/M5pe8/1/

看來你沒有重置「我」變種，所以動畫無法從頭開始重新開始（即，，從「零」）;我離開了警戒線（但被註釋掉），來告訴你我是如何得到我的結論：

  if (i > times) // if the last frame is reached, set counter to zero 
      { 
       //alert(i + ' > ' + times); 
       clearInterval(timerId); 
       i = 0; 
      } 
      else 
      { 
       element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up 
       i++; 
      } 

，當然，我加入了行啓動動畫其他click事件綁定兩個鏈接（只是爲了完整性）。現在，第二次點擊動畫重新啓動。那是你需要的嗎？

編輯：鏈接到小提琴修正