javascript - 几个周期后淡出无法正常工作

Question

我不禁认为有一个明显的答案，但我找不到它。在 HTML 中，我将一张图像放在另一张图像之上。这个想法是topimage淡出，露出bottomimage。我将 bottomimage 的 id 更改为 topimage(这样它将在下一个周期淡出)并添加一个新的 bottomimage。该函数每 3000ms 循环一次。一切都完全按照我想要的方式工作，但第三张图像和之后的每个人都不会褪色。

为什么不呢？

function rotator() {
  $("#topimage").fadeOut(1500);     //fadeout top picture over 1.5 seconds

  newtop = document.getElementById("bottomimage");
  newtop.setAttribute("id", "topimage");
  newtop.zIndex = "2";
  count = (count+1) % 5;

  //add new bottomimage
  next = document.createElement("img"); //create a new image
  next.setAttribute("id", "bottomimage");
  next.src = picts[count];
  next.style.position = "absolute";
  next.style.zIndex = "1";
  document.getElementById("slideshow").appendChild(next);
}   //end rotator

Answer 1

jQuer.fadeout() 不会从 DOM 中删除元素:只是隐藏它。所以你最终会得到多个具有相同 id 的元素，这是非法的。

我建议您改用类。

另一方面，为什么要混合 jQuery 而不是 jQuery 代码？如果您开始使用 jQuery，最好使用它来实现整个功能。

…这样你甚至不需要使用类:只需从以下内容开始:

var top = $("#topimage").fadeout(1500);

...最后用新的替换它:

var newimg=$(…)
…
top = newimg;

...然后再次循环。

嘿!

现在我刚刚注意到你没有链式效应。这是使它不起作用的实际原因:

jQuery.fadeOut() 立即退出以避免阻塞 JavaScript 循环。因此，您正在 paral.lel 中创建并淡化所有图像。这样，如果我没记错的话，您最终应该只能看到第一张图片，然后看到最后一张图片(并且您的浏览器速度不太慢)。

您应该使用回调来链接淡入淡出(请参阅 jQuery.fadeOut() documentation )，或者更好的是，使用超时事件来避免无限调用堆栈(以及由于递归闭包范围暴露而导致的指数内存消耗)。