jQuery - 带有 css 动画的淡入淡出错误答案

【问题标题】：jQuery - Fadein fadeout error with css animationjQuery - 带有 css 动画的淡入淡出错误
【发布时间】：2016-12-28 03:38:15
【问题描述】：

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

jQuery 在这种情况下工作：

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

但是同样的代码不适用于css动画：

https://jsfiddle.net/xkuyL7uy/

动画来自这里：

http://tobiasahlin.com/spinkit/

非常感谢任何帮助！

【问题讨论】：

您必须为您的 javascript 代码包含 jQuery 库。按javascript并选择jQuery最新版本，“框架和扩展”部分
你的第二把小提琴没有将 jquery 作为外部资源加载，所以基本上你所有的 javascript 都会被忽略（因为它都是 jquery）。
我多么愚蠢！但是当我包含它时，我收到此错误// tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "None" }], "*") }
@ggordon 此错误是因为您正在对 display:none 元素调用 next，然后尝试再次使用它。请参阅下面的答案以获取修复

标签： jquery html css animation

【解决方案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);
}

【讨论】：

【解决方案2】：

(1)- 我不知道这条线是什么：

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

(2)- 如果你将代码从这个https://jsfiddle.net/xkuyL7uy/ 复制到这个http://jsfiddle.net/jgTh2/12/ 它会起作用，我猜你没有链接到 jquery 或其他东西。

(3)- 试试这个方法来做你想做的事：

$(".spinner").fadeOut(); 
setTimeout(function() {
                   $(".spinner").fadeIn();
                }, 1000);

我希望这很有用。工作小提琴http://jsfiddle.net/jgTh2/14/

【讨论】：

【解决方案3】：

我看到你没有在你的 body 标签底部包含 jQuery 链接（固定：click me）。

    HTML:
    <div id="box"><h1>HELLO</h1></div>

    <div class="spinner">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>

    <!-- This is what I meant -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


    CSS:
    .spinner {
      margin: 100px auto;
      width: 40px;
      height: 40px;
      position: relative;
      text-align: center;

      -webkit-animation: sk-rotate 2.0s infinite linear;
      animation: sk-rotate 2.0s infinite linear;
    }

    .dot1, .dot2 {
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #333;
      border-radius: 100%;

      -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
      animation: sk-bounce 2.0s infinite ease-in-out;
    }

    .dot2 {
      top: auto;
      bottom: 0;
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    jQuery:
    $('#id').hide();
    $(".spinner").fadeOut().next().delay(1000).fadeIn();

如果您不确定，可以查看以下内容： click me。但是，您尝试做的是直接淡出动画，但如果页面未加载怎么办。我建议在页面加载时制作动画（请参阅我的示例）。

最好的问候，
Sinestro White

【讨论】：