Question

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

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

但不是悬停是触发器，我只想让setTimeout函数触发更改。我怎样才能做到这一点？任何帮助将不胜感激

Answer 1

好吧，你实际上可以使用setTimeout ...如果那是你正在寻找的那种触发器:)。您还需要使用jQuery（例如每个

）来迭代集合

会是这样的......

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

我认为这就是你要问的？：）

Answer 2

来自.animate()的jQuery文档：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本jQuery功能进行动画处理（例如，宽度，高度，或左边可以动画，但背景颜色不能，除非使用jQuery.Color()插件）。属性值被视为a 除非另有说明，否则为像素数。单位em和％可以在适用的地方指定。

来源：http://api.jquery.com/animate/

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

以下是使用jQuery文档建议使用的插件和setInterval调用的演示：http://jsfiddle.net/f4PEL/1/

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

setInterval()的文档：https://developer.mozilla.org/en/DOM/window.setInterval

Answer 3

不确定你想要什么，但同样我只花了十五分钟的生命我没有回过头来写一个关于如何做类似事情的例子（使用UI进行色彩动画）。

var words = ['Lorem', 'Tatum'],
    color = 'red',
    elems = [],
    T1 = setInterval(randomRed, 1000);

$('#yourelements').each(function() {
    if ($(this).text() == words[0] || $(this).text() == words[1]) {
        elems.push($(this));
    }
});

//I cut this down from the example in the fiddle, elements could be filtered in the below function instead?

function randomRed() {
    $(elems).each(function() {
        var r1 = Math.random()*500,
            r2 = Math.random()*1000;
        $(this).delay(r1).animate({color: color}, r2, function() {
            var r3 = Math.random()*500,
                r4 = Math.random()*1000;
            $(this).delay(r3).animate({color: 'black'}, r4);
        });
    });
}

这是fiddle!

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

3 个答案: