Question

Trying to use .animate to have a sliding element with absolute positioning. For some reason, the element starts jumping up and down on hover. The default height of the UL is 56px, I want it to expand to 469px on hover:

$(function() {

$('nav ul').hover(function(){
    $(this).animate({height:'469px'},'slow');
    });
$('nav ul').mouseout(function(){
    $(this).animate({height:'56px'},'slow');
    }); 

});

and the HTML is:

<nav>
    <ul>
      <li class="active"><a href="#">Menu Icon</li><!--visible menu icon-->
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
</nav><!--end nav-->
Was it helpful?

Solution

the correct code would be:

$('nav ul').hover(function(){
    $(this).animate({height:'469px'},'slow');
}, function() {
    $(this).animate({height:'56px'},'slow');
});

http://api.jquery.com/hover/

OTHER TIPS

this is because you've combined hover and mouseout events. You only need hover.

hover has two function calls that comprise it: Mousevoer and mouseout. You call them sequentially, so the code you have on mousever just goes on the hover event.

$(function() {
$('nav ul').hover(
    function(){
        $(this).animate({height:'469x'},'slow');
    },
    function(){
         $(this).animate({height:'56px'},'slow');
    }    
);

});

However, you need to make sure that you set an appropriate width for the ul, or the hover won't work correctly. Is there a default width set?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top