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

Animated objects not continuing to animate after detaching and appending

本文关键字：动画 继续 追加 对象 分离      更新时间：2023-09-26

我有几个图像正在被动画化（淡出和淡入），我想隐藏和显示。 使用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，加载）;" 如果 DOM 中不存在"load2"（因为您分离了它），则无法再次调用加载方法。 当你 appendTo 时，你必须再次调用 load（），或者你可以检查项目是否在 DOM 中，如果没有，你可以调用 load（） 函数。 在某些浏览器中，您还可能会遇到递归从自身内部一次又一次调用函数的问题。 每个浏览器处理调用次数的方式不同，有些浏览器只使用执行时间而不是递归级别。

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);
}
相关文章：