Javascript 如何使用动画颜色更改突出显示搜索词

Javascript 如何使用动画颜色更改突出显示搜索词,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,我有一个单词云,我想从中挑选一些独特的预定义单词,并平滑地改变它们的颜色。基本上我想这样做 // font color animation $(".second a").hover(function() { $(this).animate({ color: "#00eeff" }, 400); },function() { $(this).animate({ color: "#FFFFFF" }, 500); }); 但是我不想让悬停作为触发器,我只想让setTimeout函数触发更改。我该怎

我有一个单词云,我想从中挑选一些独特的预定义单词,并平滑地改变它们的颜色。基本上我想这样做

// font color animation
$(".second a").hover(function() {
$(this).animate({ color: "#00eeff" }, 400);
},function() {
$(this).animate({ color: "#FFFFFF" }, 500);
});

但是我不想让悬停作为触发器,我只想让setTimeout函数触发更改。我该怎么做?任何帮助都将不胜感激

好吧,您实际上可以使用setTimeout…如果这是您正在寻找的触发器类型:)。此外,还需要使用类似jQuery的东西来迭代集合

可能是这样的

var someMilliseconds = 500;
setTimeout(function() {
   // font color animation
   $(".second a").animate({ 'color' : '#00eeff' }, 400);
}, someMilliseconds );

我想这就是你要问的

实际上,您可以使用setTimeout…如果您正在寻找的是这种触发器:)。此外,还需要使用类似jQuery的东西来迭代集合

可能是这样的

var someMilliseconds = 500;
setTimeout(function() {
   // font color animation
   $(".second a").animate({ 'color' : '#00eeff' }, 400);
}, someMilliseconds );

我想这就是你要问的

来自
.animate()
的jQuery文档:

所有已设置动画的属性应设置为单个数值, 除非下文另有说明;大多数非数字属性不能为空 使用基本jQuery功能(例如,宽度、高度、, 或“左”可以设置动画,但不能设置背景色,除非 使用插件)。属性值被视为 像素数,除非另有规定。单位em和%可以是 在适用的情况下指定

资料来源:

简短回答:您需要一个插件来使用jQuery设置颜色动画

下面是一个使用jQuery文档建议使用的插件的演示,以及一个
setInterval
调用:

此外,如果要连续设置链接颜色的动画,请查看
setInterval()
,它将以间隔而不是一次运行。您还可以通过使用
setTimeout()
递归调用相同的函数来模拟此间隔行为


setInterval()
的文档:

来自
.animate()
的jQuery文档:

所有已设置动画的属性应设置为单个数值, 除非下文另有说明;大多数非数字属性不能为空 使用基本jQuery功能(例如,宽度、高度、, 或“左”可以设置动画,但不能设置背景色,除非 使用插件)。属性值被视为 像素数,除非另有规定。单位em和%可以是 在适用的情况下指定

资料来源:

简短回答:您需要一个插件来使用jQuery设置颜色动画

下面是一个使用jQuery文档建议使用的插件的演示,以及一个
setInterval
调用:

此外,如果要连续设置链接颜色的动画,请查看
setInterval()
,它将以间隔而不是一次运行。您还可以通过使用
setTimeout()
递归调用相同的函数来模拟此间隔行为


setInterval()

的文档也不确定您想要什么,但尽管如此,我只花了15分钟的时间,我没有回来写一个关于如何做类似事情的示例(将UI用于彩色动画)


这里有一个

也不确定你想要什么,但尽管如此,我只花了15分钟的时间,我没有回来写一个关于如何做类似事情的示例(使用UI制作彩色动画)



这里有一个

不清楚是什么问题。为什么setTimeout不起作用?如果没有:不清楚问题出在哪里,则无法在本机上设置颜色动画。为什么setTimeout不起作用?你不能在没有以下条件的情况下对颜色进行本机动画:再看看你的代码,它没有什么意义。
.each()
函数被传递了两个函数:是的,你是对的,我犯了一个错误。我会修好的。我想我不确定他/她想做什么。两个不同的动画,对吗?我会修改代码。实际上……你还需要一个“颜色”插件。很抱歉,这是一个草率的回答:)。在这里,我不久前写这篇文章是为了演示一个当你没有聚焦浏览器选项卡时会发生颜色变化的错误[。这不完全是你正在做的事情,但基本上是同一个想法。如果你设置一个
设置超时
,那么你就不会切换任何东西,你可以调用
.animate()
一次,设置延迟后颜色变化的动画(
在本例中为几毫秒)。再看一看您的代码,它不太有意义。
.each()
函数被传递了两个函数:是的,你是对的,我犯了一个错误。我会修正它。我想我不确定他/她想做什么。两个不同的动画,对吗?我会修正代码。事实上……你也需要一个“颜色”插件。对不起,这是一个草率的回答:)。在这里,我写这个是为了演示一个带有颜色变化的bug当您没有聚焦浏览器选项卡时,会出现t[。这与您所做的并不完全相同,但大致相同。如果您设置一个
setTimeout
,那么您将不会切换任何内容,您只需调用
.animate()
一次,以在延迟后设置颜色更改的动画(
在本例中为几毫秒
)。只需注意:
.animate()
的jQuery文档链接到一个16KB未缩小的插件,该插件可以制作与jQuery UI相同的彩色动画()。您可以下载一个大小非常接近的jQuery UI版本,但您必须取消选择除“效果核心”(甚至是jQuery UI核心)之外的所有内容.值得注意的是,Jasper实际上打算提到这一点,但是忘记了。这基本上只是展示了如何以最基本的方式从包含的单词中选择元素,以及如何进行一些随机颜色动画。jQuery的contains或filter方法也可以用于查找正确的元素,从那里可以很容易地更改它们c只需注意:
.animate()
的jQuery文档链接到一个16KB未缩小的插件,该插件与jQuery UI的颜色动画相同