www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to add a class with a fade in effect in jQuery?

  1. #1
    Join Date
    Aug 2008
    Posts
    20

    How to add a class with a fade in effect in jQuery?

    Here is my code... any idea on why it aint working?

    Code:
    $(document).ready(function(){
    $("#home_btn").hover(
    function(){
    $(this).addClass("grayBack").fadeIn("slow");
    }
    );
    }
    );
    I chained the action of adding a class with the fade in effect...did I do it wrong?

    And here's the HTML:

    Code:
    <div class="navigation">
            	<ul class="nav-list"> 
                <li id="home_btn">
                	HOME 
                </li>
                <li id="about_btn">
                	ABOUT US
                </li>
                <li id="team_btn">
                	TEAM
                </li>
                <li id="port_btn">
                	PORTFOLIO
                </li>
                <li id="propty_btn">
                	<a href="properties.php">
    	                PROPERTIES
                    </a>
                </li>
                <li id="dwnld_btn">
                	DOWNLOADS
                </li>
                <li id="contact_btn">
                	CONTACT US
                </li>
                </ul>            
        </div>
    Last edited by aditya2071990; 10-22-2008 at 12:01 AM. Reason: I forgot the HTML

  2. #2
    Join Date
    Aug 2008
    Posts
    20
    I forgot to give the CSS:

    Code:
    .navigation{
    position:absolute;
    }
    .nav-list{
    position:relative;
    width:130px;
    top:350px;
    left:105px;
    list-style-type:none;
    font-family:"Segoe UI", Tahoma;
    font-weight:520;
    text-align:center;
    font-size:1.2em;
    z-index:1;
    }
    #home_btn{
    padding-bottom:17px;
    }
    #about_btn{
    padding-bottom:18px;
    }
    #team_btn{
    padding-bottom:19px;
    }
    #port_btn{
    padding-bottom:19px;
    }
    #propty_btn{
    padding-bottom:17px;
    }
    #dwnld_btn{
    padding-bottom:19px;
    }
    #contact_btn{
    padding-bottom:19px;
    }
    .grayBack{
    background-color:#999999;
    }

  3. #3
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Hover takes two arguments. You only have one.

    http://docs.jquery.com/Events/hover#overout
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  4. #4
    Join Date
    Aug 2008
    Posts
    20

    Thanks, it worked

    It seems that the thing got confused on what to do when the mouse hovers out, as I didn't specify that, and so it refused to execute the function...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles