Question

让我们说例如我想创建一个使div成为fadeOut＆amp;的函数。 fadeIn并每10秒重复一次。在jQuery中。这是我目前的代码。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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动画一样快，而且速度快。

这里是good article comparing animation using CSS vs JS and jQuery

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

2 个答案: