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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jquery Animate Text Color Problem

    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!

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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>

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    jQuery’s built-in animate() function doesn’t support color fading natively, you need to add a plugin.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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
    Last edited by bullant; 04-18-2011 at 03:01 PM.


  •  

    Posting Permissions

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