code to animate fading a link [closed]

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 in jQuery without the color plugin or jQuery-UI. — Blazemonger
– Blazemonger, Commented Feb 11, 2013 at 14:45
Exact duplicate of stackoverflow.com/questions/7555811/jquery-text-color-fade-in and stackoverflow.com/questions/4512481/fading-colors-with-jquery and many others, if you searched a little bit... — Valky
– Valky, Commented Feb 11, 2013 at 14:53
@Blazemonger Thanks! A quick reference to the UI library solved this - gotta brush up on the basics someday. :D — blazonix
– blazonix, Commented Feb 11, 2013 at 15:04

Pandian · Accepted Answer · 2013-02-11 15:02:00Z

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, 2013 at 15:02

Pandian

9,1562 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

blazonix Over a year ago

Yeah - that's the answer I was looking for, didn't know I needed a separate library to enable UI effects...thanks!

gronostaj · Accepted Answer · 2013-02-11 14:54:25Z

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, 2013 at 14:54

gronostaj

2,2702 gold badges24 silver badges46 bronze badges

1 Comment

blazonix Over a year ago

Thanks for the heads up - again, didn't know I had to ref the UI library (or that one existed for our purposes...) ty!

Debasish Chowdhury · Accepted Answer · 2013-02-11 14:56:04Z

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, 2013 at 14:56

Debasish Chowdhury

1881 gold badge2 silver badges12 bronze badges

1 Comment

blazonix Over a year ago

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.

Collectives™ on Stack Overflow

code to animate fading a link [closed]

3 Answers 3

1 Comment

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Linked

Related