Javascript或jQuery文本颜色幻灯片效果？

Question

我正在尝试进行基本导航，所有链接均为纯文本，当前页面以不同的颜色显示。

我该如何对当前悬停的导航项使用不同的颜色“幻灯片”？

例如： http: //www.branded07.com/类似的东西，但是可以使文字颜色滑动而不是该链接滑动的背景？

Answer 1

这很困难：)据我了解，您要实现的目标是当您有一个单词（例如以红色显示的单词COLOR ，首先使C改变颜色，然后使O变色，然后使L等，并以这种快速且连续的运动，似乎下一个颜色从左向右滑动。 我对吗？

首先，无法使用jQuery核心对颜色进行动画处理，但是可以使用jQuery.color（）插件（请查看https://github.com/jquery/jquery-color ）。 使用此插件，一种可能的方法是抓取您正在处理的文本（悬停的菜单项），剪切每个字母并对其进行动画处理，并使用一点超时对其进行动画处理。

我在jsfiddle上为您构建了一个示例，对其进行检查并根据您的需求对其进行自定义： http : //jsfiddle.net/xhCa2/

Answer 2

您必须使用jQuery UI（扩展到toggleClass函数）：

HTML：

<div class="menu">
<span class="menu-item">Menu 1</span>
<span class="menu-item">Menu 2</span>
<span class="menu-item">Menu 3</span>
<span class="menu-item">Menu 4</span>
</div>

CSS：

.menu-item
{
    color: black;
}

.menu-item-hover
{
    color: red;
}

Javascript：

$(".menu-item").each(function() {
    $(this).hover(function() {
        $(this).toggleClass('menu-item-hover', 500);
    });
});

演示： http ： //jsfiddle.net/nQ6Ze/

Answer 3

根据您的描述，我认为您的意思是这样的？ http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

至少它可能是一个起点