Question

我想要隐藏和显示的几个动画（淡出和淡入）的图像。使用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");
});

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

Answer 1

我相信你的第一个问题是最后一行“$（'＃load2'）。延迟（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);
}

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

1 个答案: