javascript - 重新启动/刷新 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 );

这是一个 fiddle :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.将此应用到其他人身上现在应该不是什么大麻烦。例如将事件绑定(bind)到 <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.