javascript - 如何使用动画颜色变化突出显示搜索词

Question

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

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

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

Answer 1

我也不确定您想要什么，但我只是花了 15 分钟才回过头来写一个关于如何做类似事情的例子(使用 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!