JQuery fadeIn fadeOut 与 setInterval 偶尔工作答案

【问题标题】：JQuery fadeIn fadeOut with setInterval working sporadicallyJQuery fadeIn fadeOut 与 setInterval 偶尔工作
【发布时间】：2008-11-06 20:41:06
【问题描述】：

我有一堆图像需要每 2 秒一次旋转进出一个，使用花哨的 JQuery 淡入和淡出。我有 HTML 中的所有图像来预加载它们和一个 setInterval 计时器，它使当前图像淡出，然后淡入下一个图像。问题是，有时当您在淡入/淡出过程中单击或滚动时， JS 被打断，当前图像永远不会消失，下一个会消失，给你两张图像。

我感觉这与 setInterval 无法每 2 秒正常运行有关，但有没有更好的方法来完成我需要的操作？

这是一段代码：

HTML

<a href="javascript:;">
  <img id="img1" src="image1.gif" />
  <img id="img2" src="image2.gif" style="display:none;" />
  <img id="img3" src="image3.gif" style="display:none;" />
</a>

JS

var numImages = 3;
var currentImage = 1;
imageInterval = window.setInterval("changeImage();", 2000);

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow", function() {
        if (currentImage >= numImages)
        {
            currentImage = 0;
        }
        $("#img" + (currentImage + 1) ).fadeIn("slow", function() {
            currentImage++;
        });
    });
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您是否考虑过使用Cycle Plugin？听起来这完全符合您的要求，并且提供了很大的灵活性。我自己使用过这个插件，效果很好。强烈推荐。

【讨论】：

哇，令人难以置信的插件。谢谢！

【解决方案2】：

就在我的脑海中......你为什么在回调函数中做 currentImage 簿记？在我看来这更容易，甚至可能与您的问题有关：

function changeImage()
{
    $("#img" + currentImage).fadeOut("slow");
    currentImage = (currentImage >= numImages) ? 1 : currentImage + 1;
    $("#img" + currentImage).fadeIn("slow");
}

【讨论】：

【解决方案3】：

你有两次 id="img2"。

你能不能简化一下 - 先计算当前和下一个 id。然后执行您的 $().fadeOut() 和下一行 $().fadeIn() 并避免所有功能复杂性。

【讨论】：

【解决方案4】：

您的问题是，如果您在 img2 完成淡入之前单击它，currentImage 仍然认为您正在处理 img1 和 img2 之间的过渡，但实际上 img2 现在是活动的，而您正在等待 img3。

我认为 Jim 的解决方案应该会让你满意。

作为一个免费的蜜蜂，也可以考虑添加它，以便您添加更多图像而无需编辑脚本：

numImages = $("a > img").size();

【讨论】：

【解决方案5】：

还有

setInterval (function () {
    $("img:eq(0)").fadeOut ("slow").next ("img").fadeIn ("slow");
}, 2000);

【讨论】：

这只能工作一次！！ -- 想一想，选择器只包含第一个 img 元素，所以一旦它被淡出并且 .next('img') 已经淡入，那么这个函数就不起作用了。它只会继续淡出已经淡出的第一张图像并淡入已经淡出的第二张图片！ -- 我想你的意思是这样的：snook.ca/archives/javascript/simplest-jquery-slideshow

【解决方案6】：

我在使用基于snook.ca's simplest jquery slideshow 的函数时遇到了类似的问题。（请参阅我的评论@tom）尽管无论我是否单击或滚动都会发生我的情况！

似乎在循环的第一次运行之后，时间变得一团糟，开始一半淡入或淡出，然后直接跳入没有淡出！我在 firebug 中观看 html 面板，发现 css 显示属性没有正确地从“block”设置回“none”，最终导致所有图像都设置了display:block，而不管它们应该褪色状态。

我确实想知道这是否是一个时间问题，因为淡入淡出速度与 setInterval 延迟混淆，从而导致混合的触发顺序。如果是这种情况，那么我不知道如何解决它。

但是看到 css 行为后，我现在想知道这是否是 jQuery 实现它的“fadeIn”和“fadeOut”函数的方式中的一个潜在问题？？！！

【讨论】：

【解决方案7】：

我为您的代码提供了一些解决方法，并提出了这段工作代码：

$(document).ready(() => {

let numImages = 4;
let currentImage = 1;

function changeImage() {
    $('#img-' + currentImage).fadeOut(1000, function() {
        if (currentImage === numImages) {
            currentImage = 0;
        }
        currentImage++;
        $('#img-' + currentImage).fadeIn(1000, function() {
            changeImage();
        });
    })
}

changeImage();

})

【讨论】：