fadeOut几周后不能正常工作

时间:2015-04-29 17:37:09

标签: javascript jquery fadeout

我不禁想到有一个明显的答案,但我找不到它。在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

1 个答案:

答案 0 :(得分: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事件来避免无限调用堆栈(以及由于递归闭包范围说明而导致的指数内存消耗)。