jQuery Jquery Animate Text Color Problem

brandonp1313 · 04-18-2011, 02:47 AM

Hey guys. New to jQuery and with that, new to this forum. As im learning i hope to make this forum a valuable resource for myself, and as i learn, help others. Enough introduction.

I have a menu at the top of my page (ol#topnav) and as you mouseover the menu items, my background image slides in from the top and the text turns white. Everything works fine except the text, it does nothing. I have a feeling it may be a syntax problem. I have been searching for a couple hours now and can seem to find a solution. I have stumbled upon many different ways of doing it, just not in the capacity i need it.

Heres my code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>choice|media</title>

<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="js/jquery.backgroundpos.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('ol#topnav a')
	.css( {"backgroundPosition": "0px -20px"} )
	.mouseover(function(){
		$(this).animate(
			{"background-position":"0px 0px", "color":"white"},
			{duration:250})
		

		
})
	.mouseout(function(){
		$(this).stop().animate(
			{"backgroundPosition":"0px -20px"},
			{duration:250})
		})

});

</script>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>
    <div id="top_header">
    
    <div id="site_title"><img src="images/title.png" alt="choice media"/></div>
    <div id="top_nav_container">

        <ol id="topnav">
            <li><a href="#">portfolio</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
        </ol>
    </div>
    </div>
</body>
</html>

css

Code:

ol#topnav{

    width: 300px;
    list-style: none;
    margin: 0 auto;

}

ol#topnav a {

    margin: 0 auto;
    display: block;
    width: 100px;
    height: 20px;
    background-image: url(images/menu_over_bg.jpg);
    background-repeat: no-repeat;
    
    text-decoration: none;
    text-align:center;
    color: black;
    font-family: Corbel;
    font-size: 11pt;
}
ol#topnav li {

    display: block;
    float: left;
    width: 100px;
   
    

}

Sorry its messy. Any ideas or help, i would be greatfull for. Thanks!

bullant · 04-18-2011, 02:55 AM

You don't need javascript to change the menu text colour on mouseover. You can do it with just css and is better imo because it will still work in javascript disabled browsers.

Something like this which changes the link text from green to red on hover.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css">
            #topnav a {
                color: green;
            }
            #topnav a:hover {
                color: red;
            }
        </style>
        <script type="text/javascript"></script>
    </head>
    <body>
        <ol id="topnav">
            <li><a href="#">portfolio</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
        </ol>
    </body>
</html>

brandonp1313 · 04-18-2011, 04:47 AM

Hi Bullant, thanks for the reply. While that might be the method i have to go with, the reason i was using js is because i wanted the text to animate from black to white.

Wondering if it is possible to do such a thing?

bullant · 04-18-2011, 06:02 AM

This a quick and simple demo fading the link texts from balck to white on mouseover and then back to black onmouseout.

It's limited atm to basically having the start and end rgb colour values to be the same eg 0,0,0 start and 255,255,255 end.

I have to go soon but I'll be back in about 6 hours from this post and if no-one does so in the mean time, I'll post a more generic version where the start/end rgb colours can be anything.

You can add as many links as you like without having to touch the javascript.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
            var colourIncr = 10;
            var speed = 100;
            function setColour(obj){
                obj.redCurr += 10;
                if(obj.redCurr > obj.redEnd) {obj.redCurr = obj.redEnd;}
                obj.greenCurr += 10;
                if(obj.greenCurr > obj.greenEnd) {obj.greenCurr = obj.greenEnd;}
                obj.blueCurr += 10;
                if(obj.blueCurr > obj.blueEnd) {obj.blueCurr = obj.blueEnd;}
                obj.style.color = 'rgb('+obj.redCurr+', '+ obj.greenCurr + ', '+ obj.blueCurr +')';
                obj.timer = setTimeout(function(){setColour(obj)},speed);
            }
            window.onload=function(){
                oLinks = document.getElementById('topnav').getElementsByTagName('a');
                for(i=0; i < oLinks.length; i++){
                    oLinks[i].redStart = oLinks[i].greenStart = oLinks[i].blueStart = 0;
                    oLinks[i].redCurr = oLinks[i].greenCurr = oLinks[i].blueCurr = 0;
                    oLinks[i].redEnd = oLinks[i].greenEnd = oLinks[i].blueEnd = 255;
                    oLinks[i].style.color = 'rgb('+oLinks[i].redCurr+', '+ oLinks[i].greenCurr +', '+ oLinks[i].blueCurr +')';
                    oLinks[i].onmouseover=function(){setColour(this);}
                    oLinks[i].onmouseout=function(){
                        clearTimeout(this.timer);
                        this.style.color = 'rgb('+this.redStart+', '+ this.greenStart +', '+ this.blueStart +')';
                        this.redCurr = this.greenCurr = this.blueCurr = 0;
                    }
                }
            }
        </script>
    </head>
    <body>
        <ol id="topnav">
            <li><a href="#">portfolio</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
        </ol>
    </body>
</html>

VIPStephan · 04-18-2011, 09:41 AM

jQuery’s built-in animate() function doesn’t support color fading natively, you need to add a plugin.

bullant · 04-18-2011, 01:38 PM

Maybe use this demo as a guide.

Onmouseover, the link text will fade from the start colour to the end colour.

Onmouseout, the link text will fade from the current colour to the start colour.

You specify the colours using RGB. eg. 0,0,0 = black, 255,255,255 = white.

You can adjust the speed of the fading with the variables

Code:

var colourIncr = 20;
var speed = 100;

You can add as many links to the menu as you like without having to touch the javascript.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
            var colourIncr = 10;
            var speed = 50;
            function setColour(obj){
                obj.redCurr += colourIncr * obj.redDir;
                obj.greenCurr += colourIncr * obj.greenDir;
                obj.blueCurr += colourIncr * obj.blueDir;
                if(!((obj.redCurr >= obj.redStart && obj.redCurr <= obj.redEnd)
                    || (obj.redCurr <= obj.redStart && obj.redCurr >= obj.redEnd))){
                    if(obj.redDir == 1 && obj.redStart <= obj.redEnd){obj.redCurr = obj.redEnd};
                    if(obj.redDir == 1 && obj.redStart >= obj.redEnd){obj.redCurr = obj.redStart};
                    if(obj.redDir == -1 && obj.redStart <= obj.redEnd){obj.redCurr = obj.redStart};
                    if(obj.redDir == -1 && obj.redStart >= obj.redEnd){obj.redCurr = obj.redEnd};
                }
                if(!((obj.greenCurr >= obj.greenStart && obj.greenCurr <= obj.greenEnd)
                    || (obj.greenCurr <= obj.greenStart && obj.greenCurr >= obj.greenEnd))){
                    if(obj.greenDir == 1 && obj.greenStart <= obj.greenEnd){obj.greenCurr = obj.greenEnd};
                    if(obj.greenDir == 1 && obj.greenStart >= obj.greenEnd){obj.greenCurr = obj.greenStart};
                    if(obj.greenDir == -1 && obj.greenStart <= obj.greenEnd){obj.greenCurr = obj.greenStart};
                    if(obj.greenDir == -1 && obj.greenStart >= obj.greenEnd){obj.greenCurr = obj.greenEnd};
                }
                if(!((obj.blueCurr >= obj.blueStart && obj.blueCurr <= obj.blueEnd)
                    || (obj.blueCurr <= obj.blueStart && obj.blueCurr >= obj.blueEnd))){
                    if(obj.blueDir == 1 && obj.blueStart <= obj.blueEnd){obj.blueCurr = obj.blueEnd};
                    if(obj.blueDir == 1 && obj.blueStart >= obj.blueEnd){obj.blueCurr = obj.blueStart};
                    if(obj.blueDir == -1 && obj.blueStart <= obj.blueEnd){obj.blueCurr = obj.blueStart};
                    if(obj.blueDir == -1 && obj.blueStart >= obj.blueEnd){obj.blueCurr = obj.blueEnd};
                }
                obj.style.color = 'rgb('+obj.redCurr+', '+ obj.greenCurr + ', '+ obj.blueCurr +')';
                obj.timer = setTimeout(function(){setColour(obj)},speed);
            }
            window.onload=function(){
                oLinks = document.getElementById('topnav').getElementsByTagName('a');
                for(i=0; i < oLinks.length; i++){
                    //set the start colour
                    oLinks[i].redStart = 0;
                    oLinks[i].greenStart = 0;
                    oLinks[i].blueStart = 0;
                    //set the end colour
                    oLinks[i].redEnd = 255;
                    oLinks[i].greenEnd = 255;
                    oLinks[i].blueEnd = 255;

                    oLinks[i].redCurr = oLinks[i].redStart;
                    oLinks[i].greenCurr = oLinks[i].greenStart;
                    oLinks[i].blueCurr = oLinks[i].blueStart;
                    oLinks[i].style.color = 'rgb('+oLinks[i].redCurr+', '+ oLinks[i].greenCurr +', '+ oLinks[i].blueCurr +')';
                    oLinks[i].onmouseover=function(){
                        if(this.timer){clearTimeout(this.timer)};
                        this.redDir = (this.redStart <= this.redEnd)? 1 : -1;
                        this.greenDir = (this.greenStart <= this.greenEnd)? 1 : -1;
                        this.blueDir = (this.blueStart <= this.blueEnd)? 1 : -1;
                        setColour(this);
                    }
                    oLinks[i].onmouseout=function(){
                        if(this.timer){clearTimeout(this.timer)};
                        this.redDir = (this.redStart <= this.redEnd)? -1 : 1;
                        this.greenDir = (this.greenStart <= this.greenEnd)? -1 : 1;
                        this.blueDir = (this.blueStart <= this.blueEnd)? -1 : 1;
                        setColour(this);
                    }
                }
            }
        </script>
    </head>
    <body>
        <ol id="topnav">
            <li><a href="#">portfolio</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
        </ol>
    </body>
</html>

If I spend more time on this demo I might be able to optimise it a bit more but it works as is and hopefully you'll get at least the jist of how it works