Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    47
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Problem with animating text color

    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.

    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.

    Code:
    <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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    47
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV View Post
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •