如何在 jQuery 中制作 3 个动画并循环播放？（时间一团糟。）

Question

我在我的 3 张图像中使用了三种不同的淡出和淡入淡出过渡。

animate1 = function() {
    $('#changingImage').fadeOut('fast', function() {
        $('#changingImage').attr("src","../files/others/image1.jpg");
        $('#changingImage').fadeIn('fast');
    });
};

同样的功能我又用了两次，只是把1s换成了2s和3s。我用这个调用我的三个函数，每 5 秒重复一次：

animate1().delay(5000);
animate2().delay(10000);
animate3().delay(15000);

我是jQuery的新人，我不明白为什么时间不对。所发生的只是 image2（原始）被 image1 替换，仅此而已。

Answer 1

.delay() 不会重复一个事件，它只是延迟它的执行。如果你想根据给定的时间间隔重复一个事件，你需要 .setInterval()：

   window.setInterval(function(){
     setTimeout(animate1, 1000);
     setTimeout(animate2, 500);  
   }, 5000);

演示：https://jsfiddle.net/erkaner/bfb7jgaL/1/

Answer 2

尝试使用 setTimeout() javascript 函数。

文档：http://www.w3schools.com/jsref/met_win_settimeout.asp

例如：

setTimeout(function(){ animate1(); }, 5000);
setTimeout(function(){ animate2(); }, 5000);
setTimeout(function(){ animate3(); }, 5000);

这基本上是 'pauses' 您的 JavaScript/jQuery 代码在运行功能之前 5 秒并继续。

Answer 3

耶！我在很多帮助下弄明白了。

var animations = function() {
    setTimeout(function() { 
        animate1();
        console.log("Animation 1")
    }, 5000);
    setTimeout(function() { 
        animate2();
        console.log("Animation 2")
    }, 10000);
    setTimeout(function() { 
        animate3();
        console.log("Animation 3")
    }, 15000);
};
setInterval(animations, 15000);

Answer 4

你好，如果你有超过这 3 张图片，我有一个建议给你，你会为它创建一个新功能吗？那么只使用 1 个函数，它会调用它自己，并带有一个定义图像名称的属性，因为它是唯一每次都在改变的东西，所以你可以使用这个更好、更少的代码，你只有 n 值每次都会改变将增加，最大值定义您想要的图像数量

//if you want to set this animation for more than 3 image just change the max value
var max=3;
setTimeout(function(){ animate(2); }, 5000);
animate = function(n) {
$('#changingImage').fadeOut('fast', function() {
if(n<=max){
    $('#changingImage').attr("src","http://www.imacros-scripts-for-free.is-best.net/image"+n+".jpg");
    $('#changingImage').fadeIn('fast');
    if(n==max){n=1}else{n++;}
setTimeout(function(){ animate(n); }, 5000);
}
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="changingImage" src="http://www.imacros-scripts-for-free.is-best.net/image1.jpg" width="200px">

如何在 jQuery 中制作 3 个动画并循环播放？（时间一团糟。）

How do I do 3 animations in jQuery and loop them? (Timing is messed up.)

javascript

jquery

loops

fadeout

fadein

如何在 jQuery 中制作 3 个动画并循环播放？ （时间一团糟。）

How do I do 3 animations in jQuery and loop them? (Timing is messed up.)

javascript

jquery

loops

fadeout

fadein

如何在 jQuery 中制作 3 个动画并循环播放？（时间一团糟。）