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/

或者至少它可能是一个起点

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

3 个答案: