gpt4 book ai didi

javascript - blast.js 动画与 jquery ui 彩色动画

转载 作者:行者123 更新时间:2023-11-28 16:22:32 24 4
gpt4 key购买 nike

我正在使用 blast.js 来制作两个单词的动画,并使用 jquery ui 来制作颜色动画。我尝试过的一切都没有奏效。

DEMO

CSS 与 DEMO 无关,因为颜色按钮没有 css 规则。

var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);

$('.color_button').on('click', function(){
var words = $('color_body').blast({
delimiter: 'word',
generateValueClass: true
});
words.each(function(){
$(this).animate({
color: newColor
}, 500);
});
});

目标是让每个单词的颜色变为随机颜色。

最佳答案

确保将这个 jQuery 颜色插件添加到您的元素中,因为它似乎从 DOM 中丢失:https://github.com/jquery/jquery-color/blob/master/jquery.color.js (我必须使用 <script> 标签将整个脚本复制并粘贴到 JSbin 中。)

然后将您的代码更改为如下所示。 newColor 必须在按钮的 onClick 内部以及 .each() 函数内部生成,它会循环各个单词。然后“颜色文本”按钮将随机更改每个单词的文本颜色。

版本 1:

$('.color_button').on('click', function(){
var words = $('.color_body').blast({
delimiter: 'word',
generateValueClass: true
});
words.each(function(idx, obj){
var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
$(obj).animate({
"color": newColor
}, 500);
});
});

版本 2(见评论):

setInterval(function() {
var words = $('.color_body').blast({
delimiter: 'word',
generateValueClass: true
});
words.each(function(idx, obj){
var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
$(obj).animate({
"color": newColor
});
});
},500);

版本 3(请参阅评论 - 这是 auto-timer 的示例 jsfiddle):

var timer = null;
(function setColor() {
var words = $('.color_body').blast({
delimiter: 'word',
generateValueClass: true
});
words.each(function(idx, obj){
var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
$(obj).animate({
"color": newColor
});
if (!timer) {
timer = setInterval(setColor,2000); // Loops continuously.
}
});
})(); // This function will Auto-Run 1x

关于javascript - blast.js 动画与 jquery ui 彩色动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36581103/

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