Question

I want to bump up a li on hover and let it get to original state when the mouse leaves. This works but does the hover animat(up) another time when the mouse is leaving which gives me a delay and inefficient code. Do you guys have some suggestions for me to make this more efficient?

function HoverListItem() {
    var menuItem = $('#menu > li')
    menuItem.on('hover', function(){
        console.log('up');
            $(this).animate({
                'marginTop': '-10px'
            }, 150);
        });

    menuItem.on('mouseleave', function(){
        console.log('down');
            $(this).animate({
                'marginTop': '0px'
            }, 150);
        })
    };

Answer 1

This is because the animations are queued, clear the queue before issuing a new animation. I myself also prefer using hover() to register mouseenter and mouseleave.

$("#menu > li")
  .css("position", "relative")
  .hover(
    function() {
        $(this).clearQueue().animate({
            bottom: 10
        });
    },
    function() {
        $(this).clearQueue().animate({
            bottom: 0
        });
    }  

Example: http://jsfiddle.net/6xXGw/