[英]CSS animation property in jquery
So I want to generate a random number in JS to concatenate inside the css animation property, so that it has a random time property. 所以我想在JS中生成一个随机数来连接css动画属性,以便它具有随机时间属性。
As you can imagine, from my code snippet, this is a preloader. 可以想象,从我的代码片段中,这是一个预加载器。 I want it to have a random time (from 2 to 8 seconds long) 我希望它有一个随机时间(从2到8秒长)
$(window).load(function() {
var rnd = Math.random() * (8000 - 2000) + 2000;
$('.progress').css(function() {
"animation": "load" + rnd + "linear"
});
setTimeout(function() {
$('#page').addClass('loaded');
$('#page').removeClass('unloaded');
$('#loader').hide();
}, val);
});
You're not appending a time unit on your animation duration. 您没有在动画持续时间上附加时间单位。 You could either assign ms
using "animation": "load " + rnd + "ms linear"
(see how I'm leaving spaces in between the variable) or you could divide your rnd
variable as it's outputting values in thousands and use s
through "animation": "load " + rnd/1000 + "s linear"
. 你可以使用"animation": "load " + rnd + "ms linear"
分配ms
"animation": "load " + rnd + "ms linear"
(看看我如何在变量之间留下空格)或者你可以将你的rnd
变量除以它输出数千的值并使用s
到"animation": "load " + rnd/1000 + "s linear"
。
If this doesn't work, please provide a MCV example and we will help you further. 如果这不起作用,请提供MCV示例 ,我们将进一步为您提供帮助。
EDIT: Check this, I've updated your code snippet. 编辑:检查一下,我已经更新了你的代码片段。 The problem was that .css( property, value)
and not a function as you sent. 问题是.css( property, value)
而不是您发送的函数。
$(window).load(function() { var rnd = Math.random() * (8000 - 2000) + 2000; $('.progress').css("animation", "load " + rnd + "ms linear"); setTimeout(function() { $('#page').addClass('loaded'); $('#page').removeClass('unloaded'); $('#loader').hide(); }, rnd); });
#page { position: absolute; background: rgb(240, 240, 240); height: 100%; width: 100%; } #loader { position: absolute; top: calc(50% - 10px); left: calc(25%); width: 50%; } .progress { width: 100%; height: 20px; background: #3498db; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .loaded { opacity: 1; } .unloaded { opacity: 0; } @keyframes load { 0% { width: 0%; } 25% { width: 50%; } 50% { width: 60%; } 90% { width: 95%; } 100% { width: 100%; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loader"> <div class="progress"></div> </div> <div id="page" class="unloaded"> Loaded result </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.