Grow your CSS skills. Land your dream job.

animate problem

  • # April 22, 2010 at 8:56 pm

    I’m trying to animate a menu by changing the background color, however it does not seem to be working. As I have this running on my local system I am placing the code below.

    Thanks,
    Tim

    CSS:

    #header ul{margin:0; padding:0; list-style:none;}
    #header ul li{ margin:0; display:inline}
    #header ul .last{background:none}
    /*#header ul li a{background:url(../images/bg_menu.gif) top left no-repeat; color:#fff; text-decoration:none; width:126px; text-transform:uppercase; text-align:center; display:block; float:left; line-height:58px}*/
    #header ul li a{color:#fff; text-decoration:none; width:126px; text-transform:uppercase; text-align:center; display:block; float:left; line-height:58px; background-color: #660000;}

    HTML:

    <div class="main">
    <div id="header">
    <div class="menu">
    <ul id="list">
    <li class="first"><a href="index.html" class="current">Home</a></li>
    <li><a href="index-1.html">About Us</a></li>
    <li><a href="index-2.html">Mail Delivery</a></li>
    <li><a href="index-3.html">Production</a></li>
    <li class="last"><a href="index-4.html">Our Clients</a></li>
    </ul>
    </div>

    JS:

    $("#list a").hover(function () {
    $(this).animate({backgroundColor:"#ffffff"}, 800);
    });

    # April 23, 2010 at 6:53 am

    Never mind, forgive my ignorance…. a little RTFM goes a long way…..

    Tim

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".