Question

我正在使用JS创建一个简单的函数，一次显示一个项目。当您查看页面时效果很好，但是当您最小化或更改标签然后返回时，会显示所有三个项目。

任何人都知道为什么？好像fadeIn（x）一直在运行但hide（）停止工作。我甚至检查了不同的课程。

以下是代码：

$(document).ready(function () {

function start() {
  $(".featured-items").hide();
  $( ".item-1" ).fadeIn('slow');
  setTimeout(one, 5000);
}
  function one() {
  $(".featured-items").hide();
  $( ".item-2" ).fadeIn('slow');
  setTimeout(two, 5000);
}
function two() {
  $(".featured-items").hide();
  $( ".item-0" ).fadeIn('slow');
  setTimeout(start, 5000);
}
setTimeout(start, 5000);

});

问题解决了，请查看下面的最佳答案，并确保阅读评论以获得良好的理解。感谢所有

Answer 1

（已更新以提供完整答案）

您的原始代码过于复杂，而且更灵活，更简单的实现只需要一个函数，以及库中的一系列项目。其次，您应该修改代码，以便fadeIn动画立即启动而不是排队。只有一个功能而不是几个功能使这样的改变更容易。

请注意，在下面的代码中，与原始代码一样，各个图库项目都是类而不是单个元素ID，并且可以淡入多个项目。

var gallery = [ '.item-1', '.item-2', '.item-3' ];
var i = 0;
function galleryEvent() {
    $(".featured-items").hide();
    $( gallery[i] ).fadeIn({duration: 'slow', queue: false});

    i = (i + 1) % gallery.length;
    setTimeout(galleryEvent, 5000);
}

// start everything off....
galleryEvent();

当窗口不可见时，Jquery / JS出现故障

1 个答案: