Javascript 已设置动画的对象在分离和附加后不继续设置动画

我有几个正在制作动画（淡出和淡入）的图像，我想隐藏和显示它们。使用

hide（）

和

show（）

不起作用，因为它们只是将自己淡入淡出。我想我可以

detach（）

它们，然后

appendTo（）

它们，这样可以工作，但是动画在它们重新连接后不会继续。一些代码如下：

动画

function loading() {
    $('#load0').delay(300).fadeIn(200);
    $('#load1').delay(500).fadeIn(200);
    $('#load2').delay(700).fadeIn(200);
    $('#load0').delay(500).fadeOut(75);
    $('#load1').delay(700).fadeOut(75);
    $('#load2').delay(900).fadeOut(75, loading);
}
loading();

分离和附加

var load;
$('#slideshow').on('cycle-before', function() {
    load = $('.load').detach();
});
$('#slideshow').on('cycle-after', function() {
    load.appendTo("#main");
});

---

如何隐藏和重新显示这些元素？

我相信您的第一个问题是最后一行“$（'#load2'）。delay（900）。fadeOut（75，loading）；”如果DOM中不存在“load2”（因为您分离了它），则无法再次调用加载方法。在追加时必须再次调用loading（），或者可以检查项目是否在DOM中，如果不在DOM中，则可以调用loading（）函数。在某些浏览器中，递归从函数本身一次又一次地调用函数时，也可能会遇到问题。每个浏览器处理调用的数量不同，有些浏览器只使用执行时间，而不是递归级别

function loading() {
  $('#load0').delay(300).fadeIn(200);
  $('#load1').delay(500).fadeIn(200);
  $('#load2').delay(700).fadeIn(200);
  $('#load0').delay(500).fadeOut(75);
  $('#load1').delay(700).fadeOut(75);
  $('#load2').delay(900).fadeOut(75, loading);
}

---

你想一次显示一个图像吗？不。。。它们依次淡入，然后依次淡出。就像？不，所有三个彼此相邻淡入，然后所有三个都淡出。您可以在此处（简要）看到：。