在预加载器中停止无限动画答案

【问题标题】：Stop infinite animation in preloader在预加载器中停止无限动画
【发布时间】：2016-08-24 14:17:58
【问题描述】：

我现在正在为网页制作预加载器，但不知道如何停止动画，因此 javascript 可以正常工作并将预加载器淡化。

基本上这是整个情况，我就是无法正常工作。

$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})

.preloader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 99999;
}

.cssload-container {
    position: relative;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgb(204, 204, 204);
    border-left-color: rgb(0, 0, 0);
    border-radius: 974px;
    -o-border-radius: 974px;
    -ms-border-radius: 974px;
    -webkit-border-radius: 974px;
    -moz-border-radius: 974px;
    
}

.cssload-whirlpool {
    margin: -24px 0 0 -24px;
    height: 49px;
    width: 49px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
    content: "";
    margin: -22px 0 0 -22px;
    height: 43px;
    width: 43px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
    content: "";
    margin: -28px 0 0 -28px;
    height: 55px;
    width: 55px;
    animation: cssload-rotate 2300ms linear infinite;
    -o-animation: cssload-rotate 2300ms linear infinite;
    -ms-animation: cssload-rotate 2300ms linear infinite;
    -webkit-animation: cssload-rotate 2300ms linear infinite;
    -moz-animation: cssload-rotate 2300ms linear infinite;
}

@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-rotate {
    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}

<div class="preloader">
        <div class="cssload-whirlpool"></div>
</div>

希望有任何帮助:-)

谢谢。

【问题讨论】：

您是要淡出、移除、停止动画还是其他？
.preloader 是z-index 空白页所以去掉它，它下面的网页内容就会出现。它应该作为假的预加载页面。
在 sn-p 中包含 jQuery 后它看起来对我有效... $ 未定义，因此您会收到错误和无限动画。

标签： javascript css animation preloader

【解决方案1】：

你错过了吗

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})

.preloader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 99999;
}

.cssload-container {
    position: relative;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgb(204, 204, 204);
    border-left-color: rgb(0, 0, 0);
    border-radius: 974px;
    -o-border-radius: 974px;
    -ms-border-radius: 974px;
    -webkit-border-radius: 974px;
    -moz-border-radius: 974px;
    
}

.cssload-whirlpool {
    margin: -24px 0 0 -24px;
    height: 49px;
    width: 49px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
    content: "";
    margin: -22px 0 0 -22px;
    height: 43px;
    width: 43px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
    content: "";
    margin: -28px 0 0 -28px;
    height: 55px;
    width: 55px;
    animation: cssload-rotate 2300ms linear infinite;
    -o-animation: cssload-rotate 2300ms linear infinite;
    -ms-animation: cssload-rotate 2300ms linear infinite;
    -webkit-animation: cssload-rotate 2300ms linear infinite;
    -moz-animation: cssload-rotate 2300ms linear infinite;
}

@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-rotate {
    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="preloader">
        <div class="cssload-whirlpool"></div>
</div>

【讨论】：

天哪，是的。我在自定义脚本下拥有它。现在感觉很愚蠢......谢谢你，对不起你的时间。

【解决方案2】：

这可能是一件愚蠢的事情，但我通过在我的 codepen 中实现 jQuery 让它工作了。

// StackOverflow requires code in order to link codepens!
$(window).load(function() {
    $('.cssload-whirlpool').fadeOut();
    $('.preloader').delay(350).fadeOut('slow');
    $('body').delay(350).css({'overflow':'visible'});
})

http://codepen.io/anon/pen/xOokwG

编辑：原来不是:)。

【讨论】：