Question

我有一个简单的fadeIn fadeOut动画，它基本上是一个闪烁的箭头。但是，它不会循环。它只需要一次，就完成了。我在这里找到了答案 - ＆gt; 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，因为动画运行10s
如果你想让它现在开始，你必须在执行间隔之前调用它一次（第一次执行间隔是在延迟之后）

-

$(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调用。

setInterval循环动画不起作用

4 个答案: