javascript - setInterval 循环动画不起作用

Question

我有一个简单的 fadeIn fadeOut 动画，它基本上是一个闪烁的箭头。但是，它不会循环。它只进行一次，就完成了。我在这里找到了答案-> How to repeat (loop) Jquery fadein - fadeout - fadein，但是当我尝试遵循它时，我的不起作用。

动画的脚本是

<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
   $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

答案中给出的脚本是

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

所以我认为最终的组合是

 $(document).ready(function() {
   setInterval(function () {
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
    }, 5000);
});
    </script>

有人可以指出我做错了什么吗？谢谢

Answer 1

两个细节：

• 您必须将间隔设置为，10000因为您的动画运行 10 秒

• 如果你想让它现在开始，你必须在执行间隔之前调用它一次（第一次执行间隔是在延迟之后）

--

$(document).ready(function() {

   function animate() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
   }

   animate();
   setInterval(animate, 10000);
});​

在这里演示：http: //jsfiddle.net/bjhG7/1/

--

使用回调而不是 setInterval 的替代代码（见注释）：

$(document).ready(function() {

   function animate() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000, animate);
   }

   animate();
});​

在这里演示：http: //jsfiddle.net/bjhG7/3/

Answer 2

function fadein(){
    $('#picOne,#picTwo').animate({'opacity':'1'},1000,fadeout())
}
function fadeout(){
    $('#picOne,#picTwo').animate({'opacity':'0'},1000,fadein())
}
fadein()

Answer 3

利用 的回调参数.fadeOut()。传递对执行淡入淡出的函数的引用作为回调参数。根据计数器选择要淡出的图像：

$(function() {
    var imgs = $('#picOne,#picTwo');
    var fadeCounter = 0;

    (function fadeImg() {
        imgs.eq(fadeCounter++ % 2).fadeIn(1000).delay(3000).fadeOut(1000, fadeImg);
    })();
});

演示：http: //jsfiddle.net/KFe5h/1

Answer 4

随着动画序列变得越来越复杂，我发现使用async.js会导致代码更具可读性和可维护性。使用 async.series 调用。