jQuery - 带有CSS动画的淡入淡出错误

Question

我想在打开网页时运行加载动画，然后淡出并替换为另一个 div。我正在使用 jQuery，但由于某种原因，动画似乎干扰了 fadein 和 fadeout，我无法弄清楚。

jQuery 在这种情况下有效:

http://jsfiddle.net/jgTh2/12/

但相同的代码不适用于 css 动画:

https://jsfiddle.net/xkuyL7uy/

动画来自这里:

http://tobiasahlin.com/spinkit/

非常感谢任何帮助!

Answer 1

您设置它的方式需要一个高度(一旦您包含 jQuery)并且淡出使元素转到 display:none 没有高度。出现此问题是因为您在 display:none 元素上调用 next() 函数，然后尝试使用它。只需使用超时而不是 .next().delay(1000)

https://jsfiddle.net/xkuyL7uy/4/

$('#id').hide();

var spin = $(".spinner");

spin.fadeOut();

setTimeout(function() 
{
    spin.fadeIn();
}, 2000);

如果你想控制淡入淡出的长度使用这个

https://jsfiddle.net/xkuyL7uy/3/

var spin = $(".spinner");

fadeTo(spin, 0);

setTimeout(function() 
{
    fadeTo(spin, 1);
}, 1000);

function fadeTo(selector, num) {
   selector.fadeTo(1000, num);
}

要保持淡入淡出，请使用这样的间隔

https://jsfiddle.net/xkuyL7uy/5/

$('#id').hide();

var spin = $(".spinner");

fadeTo(spin, 0);

setInterval(function() {
    fadeTo(spin, 1);
    setTimeout(function() 
    {
        fadeTo(spin, 0);
    }, 1000);
}, 1000);

function fadeTo(selector, num) {
   selector.fadeTo(1000, num);
}