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: 239
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