重新启动/刷新Javascript函数或计时器

此时，单击“测试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/

来源

2013-05-05 Sammy Viv

我会用的''
代替''
。 – 2013-05-05 23:40:21

据我所知，你想要动画（无论现在的状态）重新启动，如果其中一个按钮被点击？

嘛，如果是的话，你首先应该调用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.

来源

2013-05-05 21:20:51

我怎么会重启动画被点击任意链接的时候？

要定义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); 
}

来源

2013-05-05 21:27:37

我改变了你的小提琴：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事件绑定两个链接（只是为了完整性）。现在，第二次点击动画重新启动。那是你需要的吗？

编辑：链接到小提琴修正

来源

2013-05-05 21:37:39

重新启动/刷新Javascript函数或计时器

回答

相关问题