jquery animated buttons that just wont behave

Posted by TJ Sherrill on Stack Overflow See other posts from Stack Overflow or by TJ Sherrill
Published on 2010-06-17T21:47:44Z Indexed on 2010/06/17 21:53 UTC
Read the original article Hit count: 234

Filed under:
|
|

Ok I have a inline list of buttons.

<ul id="nav">
   <li class="home"><a href="#">Menu Item</a></li>
   <li class="contact"><a href="#">Menu Item</a></li>
   <li class="about"><a href="#">Menu Item</a></li>
</ul>

.home{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line_over.png);
background-repeat:no-repeat;
height:70px;
width:134px;
}

$(document).ready(function(){
 $("#nav .home").mouseover(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    }).mouseout(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    });
});

Each menu item has a background image, and then when its hovered the background image is replaced by a taller image. Ultimately I am trying to build a simple menu where on mouseover the menu item appears to slide up. But in reality Jquery can animate the toggleClass with slideToggle. The problem is that this current code doesn't behave right.

It jumps up and down, because the text is moving. I am pretty new to Jquery so any help is greatly appreciated. I also loaded this up at http://gasworks.ravennainteractive.com/result/

thanks

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about animate