...

View Full Version : jQuery Problem with animating text color



Jearb
07-28-2010, 12:01 AM
I've been working on a Jquery snippet for my blog for a while now. I want to make it so that, when you hover over a link, it animates it through a bunch of colors. I got the It's a Rainbow! script online from buildinternet.com, and combined it with the necessary jquery.color.js script. It's not working, though. I used to be alright a Javascript, but I haven't used it for a while and I think my problem is coming from the hover() function. If possible, could you tell me what I'm doing wrong? Thanks.


<script type="text/javascript" src="jquery.color.js"></script>
<script>
$(document).ready(function() {

spectrum();

function spectrum(){
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#welcome').animate( { backgroundColor: hue }, 1000);
spectrum();
}

});
$('a').hover(

function(){ $(this).animate({color:hue}, 50); //mouseover
},
function(){
$(this).css({color:'black'}); // mouseout
}
);

Sorry for the messy source.

harbingerOTV
07-28-2010, 02:45 PM
I didn't dissect your code but, I just wrote some new code. Basically the same thing. It will cycle the link color on hover and on mouseout, it will fade to black in 1 second.



<style type="text/css">
a {
color: #000;
font: bold 30px/1 arail, sans-serif;
}
</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.color.js"></script>

<script>

function spectrum(link){
var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(link).animate({'color': col}, 1000, function(){
spectrum(link);
});
//return col;
}


$(document).ready(function() {

//$('#welcome').animate( { backgroundColor: hue }, 1000);

$('a').hover(function() {
spectrum(this);
},function() {
$(this).stop().animate({'color': '#000'}, 1000);
});

});
</script>

<div id="welcome">
<a href="#x">some link</a>
</div>


see if you can use that

Jearb
07-28-2010, 04:51 PM
I didn't dissect your code but, I just wrote some new code. Basically the same thing. It will cycle the link color on hover and on mouseout, it will fade to black in 1 second.


I didn't find the source to work. :(

harbingerOTV
07-28-2010, 06:29 PM
did you try my source as one complete example or did you take out some and try to apply it to your issue?

You have a link somewhere?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum