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;

...然后再循环。

HEY！

现在我注意到你没有链接效果。这是使其不起作用的实际原因：

jQuery.fadeOut（）退出IMMEDIATELY以避免阻止JavaScript循环。所以你在paral.lel中创建和淡化所有图像。这样，如果我没错（并且您的浏览器太慢了），您应该最终只看到第一张图像，然后才看到最后一张图片。

你应该使用回调链接fadings（参见jQuery.fadeOut() documentation），或者更好的是，使用timeout事件来避免无限调用堆栈（以及由于递归闭包范围说明而导致的指数内存消耗）。

fadeOut几周后不能正常工作

1 个答案: