gpt4 book ai didi

javascript - 减少 jQuery 彩色动画的加载时间

转载 作者:行者123 更新时间:2023-11-28 18:43:03 26 4
gpt4 key购买 nike

我试图让每个跨度以 3 秒的间隔在随机颜色之间旋转。

JSFiddle:http://jsfiddle.net/WERFJ/21/

<h1><span class="first">TEXT1</span> <span class="second">TEXT2</span> <span class="third">TEXT3</span></h1>

目前我正在使用下面的代码和 jquery.animate-colors插入。有什么方法可以使此运行或更快地获得相同的效果。 Chrome 可以处理它,但 FF 经常崩溃。谢谢!

$(document).ready(function() {  
spectrum();

function spectrum(){
var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';
var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';

$('.first').animate( { color: hue1 }, 3000);
$('.second').animate( { color: hue2 }, 3000);
$('.third').animate( { color: hue3 }, 3000);
spectrum();
}
});

最佳答案

我认为你的问题是递归调用没有等待动画完成。通过将调用作为回调添加到最后一个动画调用,您将仅在最后一个调用完成时调用它,而不是排队和无限的动画链。 http://jsfiddle.net/WERFJ/23/它现在似乎在 firefox 中工作正常

$(document).ready(function() {
spectrum();

function spectrum() {
var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';
var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';

$('.first').animate({
color: hue1
}, 3000);
$('.second').animate({
color: hue2
}, 3000);
$('.third').animate({
color: hue3
}, 3000, spectrum);
}
});​

关于javascript - 减少 jQuery 彩色动画的加载时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11130651/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com