code to animate fading a link

Question

EDIT: Answered in comments - how do I vote for an answer in the comments?? Thanks!

I've been trying to implement this to no avail - I have no idea what's wrong - it worked perfectly in jsfiddle but not in my actual html code...I think it's something to do with how I implemented it. I'm sorry if this is a little elementary, but I'm quite new to jQuery. Here's the HTML code (including the jQuery code snippet):

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>

</head>
<body>
<script>
$(document).ready(function(){

$('a').mouseenter(function(){
    $(this).animate({
        color: '#ff0000'
    }, 1000);
}).mouseout(function(){
    $(this).animate({
        color: '#000000'
    }, 1000);
});

});
</script>

<a href = "http://google.com" class = "homeLink">Google</a>

</body>
</html>

Greatly appreciate any feedback, comments and advice! Baggio

[You can't animate colors](http://api.jquery.com/animate/) in jQuery without the [color plugin](https://github.com/jquery/jquery-color/) or [jQuery-UI](http://jqueryui.com). — Blazemonger, Feb 11 '13 at 14:45
However, [css3 transitions](http://stackoverflow.com/q/4347104/901048) can do this easily. — Blazemonger, Feb 11 '13 at 14:53
Exact duplicate of http://stackoverflow.com/questions/7555811/jquery-text-color-fade-in and http://stackoverflow.com/questions/4512481/fading-colors-with-jquery and many others, if you searched a little bit... — Valky, Feb 11 '13 at 14:53
@Blazemonger Thanks! A quick reference to the UI library solved this - gotta brush up on the basics someday. :D — blazonix, Feb 11 '13 at 15:04
@Valky I did get the code from that question, but my question is different - as Blazemonger correctly mentioned, I needed to add a reference to the UI library to enable UI effects. :) — blazonix, Feb 11 '13 at 15:05
@Debasish Chowdhury Yeah...I want to let it fade on hover to another color... — blazonix, Feb 11 '13 at 15:05
The answer is in the comments...how do I vote for that as the answer?? — blazonix, Feb 11 '13 at 15:06
I'm sorry I didn't know something as basic as this...as I mentioned I'm completely new to jQuery - elementary as it is, it helped me answer, so I don't think this question deserved a vote down... — blazonix, Feb 11 '13 at 15:10

score 2 · Accepted Answer · answered Feb 11 '13 at 15:02

2

Include the color animation JQuery UI in your code and try the same...

it will work

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Fiddle : http://jsfiddle.net/RYh7U/63/

Reference : http://jqueryui.com/animate/

answered Feb 11 '13 at 15:02

Pandian

8,848
2
23
33

Yeah - that's the answer I was looking for, didn't know I needed a separate library to enable UI effects...thanks! – blazonix Feb 11 '13 at 15:08

score 1 · Answer 2 · answered Feb 11 '13 at 14:54

1

You need jQuery Color plugin to animate colors - grab a copy here. Remember to include it after main jQuery lib.

Or maybe just animate opacity instead of color if you want it to appear and disappear completely:

$('a').mouseenter(function(){
    $(this).animate({
        opacity: '1'
    }, 1000);
}).mouseout(function(){
    $(this).animate({
        opacity: '0'
    }, 1000);
});

answered Feb 11 '13 at 14:54

gronostaj

2,231
2
23
43

Thanks for the heads up - again, didn't know I had to ref the UI library (or that one existed for our purposes...) ty! – blazonix Feb 11 '13 at 15:08

score 1 · Answer 3 · answered Feb 11 '13 at 14:56

1

If you want to make the text faded ... use opacity ...

$(document).ready(function(){

   $('a').mouseenter(function() {
     $(this).animate({ opacity : '0.5' }, 1000);
   }).mouseout(function() {
     $(this).animate({ opacity: '1'}, 1000);
   });
});

answered Feb 11 '13 at 14:56

Debasish Chowdhury

188
2
12

Opacity is a good option as well, but I don't want just to fade the text, I want to fade it on hover, and back to whatever color it was back before. – blazonix Feb 11 '13 at 15:09

code to animate fading a link

3 Answers3