Question

代码是：

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() }); 
};

第一张图片加载完美，但第二张，第三张和第四张图片没有出现。我写错了代码吗？

Answer 1

主要问题可能是，效果和动画不会相互等待，所以它们几乎会同时运行。事实上，你的代码会创建一个没有足够等待的无限/无限循环（事实上它是1秒。导致你在最后一个fadeTo之后再次运行，它有1秒的淡入淡出效果）。我认为它也会锁定浏览器。

所以打破链，尝试使用fadeTo中的回调函数以某种方式对齐函数调用。要意识到你只使用回调函数只是为了最后的淡入淡出效果而不是整个运行方法！不要以为你只是将它们写在另一个下面来链接效果！

另一个小问题可能是“;”在run（）之后的最后一行末尾：

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

添加;在run（）之后：

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

JQuery没有显示下一个图像

1 个答案: