分离和附加后动画对象不继续动画

Posted 2023-02-16

【中文标题】分离和附加后动画对象不继续动画

【英文标题】：Animated objects not continuing to animate after detaching and appending

【发布时间】：2013-11-17 01:36:19

【问题描述】：

我有几张正在动画（淡出和淡入）的图像，我想隐藏和显示它们。使用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");
);

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

【问题讨论】：

你想一次显示一张图片吗？

不...它们依次淡入，然后依次淡出。

喜欢jsfiddle.net/arunpjohny/Sqe2s/1 ?

不，所有三个彼此相邻淡入，然后所有三个淡出。你可以在这里（简要地）看到它：element17.com.

【参考方案1】：

我相信您的第一个问题是最后一行“$('#load2').delay(900).fadeOut(75, loading);”如果 DOM 中不存在“load2”（因为您已将其分离），则无法再次调用加载方法。您必须在 appendTo 时再次调用 loading() ，或者您可以检查项目是否在 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);