如何将 Jquery animate 函数与类中样式的链接一起使用？

Question

我正在寻找正确的语法来完成这项工作。 事情很简单，只需根据网页的颜色主题为链接（链接、悬停、访问和活动）选择不同的颜色。

让我们看看：

CSS

.DarkTheme a
{
    color: #66cccc;
}

.DarkTheme a:visited
{
    color: #66FF99;
}

.DarkTheme a:hover
{
    color: #AAFFCC;
}

.DarkTheme a:active
{
    color: #FFFFFF;
}

---

JQUERY（我也在使用 JqueryColor，因为我使用的是颜色过渡，但这只是为了澄清这个问题不是问题）：

正确的语法如何！！？

function ChangeLinkColors()
{
    $("a.DarkTheme:link").animate({"color":"#00FF0F"}, 2000);
    $("a.DarkTheme:visited").animate({"color":"#0F00FF"}, 2000);
    $("a.DarkTheme:hover").animate({"color":"#F0FF0F"}, 2000);
    $("a.DarkTheme:active").animate({"color":"#00FFFF"}, 2000);
}

这不起作用。

function ChangeLinkColors()
{
    $(".DarkTheme a:link").animate({"color":"#00FF0F"}, 2000);
    $(".DarkTheme a:visited").animate({"color":"#0F00FF"}, 2000);
    $(".DarkTheme a:hover").animate({"color":"#F0FF0F"}, 2000);
    $(".DarkTheme a:active").animate({"color":"#00FFFF"}, 2000);
}

这不起作用！。

上面这两个相同，但“颜色”字没有引号，都不起作用。

function ChangeLinkColors()
{
    $("a:link", $(".DarkTheme")).animate({"color":"#0000FF"}, 2000);
    $("a:visited", $(".DarkTheme")).animate({"color":"#0F00FF"}, 2000);
    $("a:hover", $(".DarkTheme")).animate({"color":"#F0FF0F"}, 2000);
    $("a:active", $(".DarkTheme")).animate({"color":"#00FFFF"}, 2000);
}

这是“我不会工作”方法的另一种方式...带或不带引号 con color 参数...

Herejquery动画的文档：

其中一些方法“看起来”有效，但并非完全改变颜色（link、visited、hover 或 active 之间没有区别）。

有人知道正确的方法吗？

我没有想法。

Answer 1

此任务不需要 JQuery。你可以使用CSS3 transition。

试试这个：

a {
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    color: #ff000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.dark a {
    color: #ff0000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.dark a:hover {
    color: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

http://jsfiddle.net/8yQ6D/3/

Answer 2

是的，玛丽安，但请注意我之前所说的，颜色从一个变为另一个的变化并不正确，例如：

链接：红色 悬停：青色 访问：蓝色

如果访问的链接（蓝色），当您将鼠标悬停时，它不会从蓝色变为青色，而是突然变为红色，然后平滑变为青色，反之亦然，当鼠标离开时（从青色顺利变红，又突然变蓝）。这是不正确的。

只需在 Fiddle 中尝试一下您自己的示例，获取一个主题，使用我指定的颜色（很容易看到从蓝色到红色的残酷变化，而不是平滑的蓝色到青色，并在 1 秒时保留过渡, 看它没有问题。）

不管怎样，谢谢你在这里，帮助我，非常感谢。

Answer 3

为了根据配色方案更改处于不同状态（已访问、活动）的链接的颜色，首先确保您的 CSS 文件中已准备好配色方案，并且每个方案都依赖于一个单独的类。

有了这些，您的主题选择器只需要更改一个容器元素类（可能是主体）。

这是 CSS 中的主题的样子：

/*THEME 1*/
.theme_1 a{
    text-decoration: none;
    background-color: orange;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.theme_1 a:active{
    border: 1px dashed blue;
}
.theme_1 a:visited{
    color: green;
}
.theme_1 a:hover{
    background-color: red;
}

仅使用 jQuery 来更改容器。 JSFIDDLE example

编辑：为什么 CSS 动画优于 jQuery 动画？

A：我通常不喜欢只使用一种解决方案。但在这种情况下，由于:hover 和:active 的易变性特性，CSS 动画是可行的方法，尤其是当您谈论动态颜色主题转换时。您也不能在 JavaScript 中选择 visited 链接