How to use Jquery animate function with links that are styled in a class?

Question

I'm looking for the correct syntax for make this work. The thing is so simple as select different colors for links (link, hover, visited and active) depending of the color theme of the webpage.

Let's see:

CSS

.DarkTheme a
{
    color: #66cccc;
}

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

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

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

---

JQUERY (I'm using JqueryColor too, cause I'm using color transitions, but this is only for clarify this issue isn't a problem):

How would be correct syntax!!?

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);
}

This doesn't works.

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);
}

This doesn't works!.

The same in this two from above, but without quotes on "color" word, neither works.

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);
}

This is another way of "I'm not gonna work" method... with, or without quotes con color parameter...

Here the documentation of Jquery animation:

Some of this ways to do it "appears" to work, but not, only change the color completely (no difference between link, visited, hover or active).

Anyone know how is the correct way?

I'm out of ideas.

Answer 1

You don't need JQuery for this task. You can usee CSS3 transition.

Try this:

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

In order to change the color of the links in different states (visited, active) based on the color scheme, first make sure that you have the color schemes ready in your CSS files and that each scheme depends on a separate class.

With these in place, your theme selector just needs to change a container element class (might be body).

Here's what a theme in CSS could look like:

/*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;
}

Use jQuery only to change the container. JSFIDDLE example

Edit: Why CSS animate over jQuery animations?

A: I usually don't religiously prefer only one solution. But in this case, CSS animations are the way to go due to the volatile nature of the :hover and :active especially when you're talking about dynamic color theme transitions. Also you can not select the visited links in JavaScript

Answer 3

Yes Marian, but realize how I said previously, color changes doesn't go correctly from one to anohter, for example:

link:red hover:cyan visited:blue

In case a visited link (blue), when you hover the mouse, it doesn't goes from blue to cyan, it goes suddenly to red, and then, smoothly to cyan, and viceversa when mouse is out (from cyan to red smoothly and the suddenly blue again). This is not correct.

Just give it a try in Fiddle with your own example, get a theme, use the color I specified (is easy see the brutal change from blue to red, in place of smoothly blue to cyan, and leave transitions at 1 second, for see it without problems.)

Anyway, thanks for be here, helping me, I appreciate it a lot.