Question

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

jQuery适用于这种情况：

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

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

https://jsfiddle.net/xkuyL7uy/

动画来自这里：

http://tobiasahlin.com/spinkit/

任何帮助都非常感谢！

Answer 1

你设置它的方式需要一个高度（一旦你包含jQuery）和fadeout使元素去显示：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);
}

Answer 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/

Answer 3

我发现你没有在身体标签的底部包含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

jQuery - 使用css动画的Fadein fadeout错误

3 个答案: