如何使一个函数在jquery中重复？

Question

比方说，我想创建一个函数，使div fadeOut ＆ fadeIn并每10秒重复一次。 在jQuery中。 这是我目前的代码。

window.setInterval(function(){
    $("leftEye").fadeOut("slow");
}, 5000);

Answer 1

在这种情况下，CSS动画似乎更合适 - 尤其是因为硬件加速了。 您可以创建关键帧，然后将它们设置为在5秒的时间内动画，无限重复。

 @keyframes fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .inifinte-fader { opacity: 1; animation: fade 5s infinite; } 

 <div class="inifinte-fader">Foo bar fizz buzz</div> 

Answer 2

如果你想在jQuery中使用你的方法，你可以使用fadeToggle而不是fadeOut 。

// toggle the fade effect for #leftEye every 10 seconds
window.setInterval(function(){
   $("leftEye").fadeToggle("slow");
}, 10000); // 10000 milliseconds

这将确保每隔~10秒适当地切换淡入淡出效果。

可以说更好的方法是使用CSS，正如Rory McCrossan所证明的那样 ，特别是不使用jQuery来制作动画。

原因是浏览器的渲染引擎通常可以使用CSS更有效地执行动画（它可以提前优化事物），而使用JavaScript动画有时无法提前优化。 与使用JS手动执行各种计算（例如随时间转换高度或不透明度）相比，使用CSS编写动画逻辑也更容易且更具表现力。

现在，在这个动画中使用jQuery实际上比CSS更具表现力（因为它的1行代码）但是如果性能很重要，那么使用CSS肯定胜过jQuery。

但值得注意的是，经过充分优化的JavaScript（不是jQuery）通常与CSS动画相比速度更快。

这是一篇很好的文章比较使用CSS与JS和jQuery的动画