JQuery不显示下一个图像

JQuery not showing next image

本文关键字：图像 下一个 显示 JQuery      更新时间：2023-09-26

代码为:

var run = function(){
    $(".fade#f1").delay(0).fadeTo(1000, 1);
    $(".fade#f2").delay(2000).fadeTo(1000, 1);
    $(".fade#f1").delay(4000).fadeTo(1000, 0);
    $(".fade#f2").delay(4500).fadeTo(1000, 0);
    $(".fade#f3").delay(8000).fadeTo(1000, 1);
    $(".fade#f4").delay(9000).fadeTo(1000, 1);
    $(".fade#f3").delay(5000).fadeTo(1000, 0);
    $(".fade#f4").delay(5500).fadeTo(1000, 0);
    $(".fade#f5").delay(16000).fadeTo(1000, 1);
    $(".fade#f6").delay(17000).fadeTo(1000, 1);
    $(".fade#f5").delay(5000).fadeTo(1000, 0);
    $(".fade#f6").delay(5000).fadeTo(1000, 0, function() { run() }); 
};

第一张图片加载得很好，但是第二、第三和第四张图片没有出现。我的代码写错了吗?

主要问题可能是，效果和动画不会彼此等待，所以它们几乎会同时运行。实际上，你的代码创建了一个无限循环，没有足够的等待(实际上是1秒)。因为你可以在最后一次淡出后再次运行，这有1秒的淡出效果)。我认为它也会锁定浏览器。

所以打破这个链，试着用fadeTo中的回调函数以某种方式对齐函数调用。请注意，回调函数只用于最后的淡出效果，而不是在整个运行方法之后使用!不要认为你只是通过在另一行下写它们来连锁效果!

另一个小问题可能是run()后最后一行末尾的";":

$(".fade#f6").delay(5000).fadeTo(1000, 0, function() { run() });

添加;在run (): 

$(".fade#f6").delay(5000).fadeTo(1000, 0, function() { run();});
相关文章：