1

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

2 Answers 2

1

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/

0

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?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.