javascript - 更高效地动画列表项

Question

我想在悬停时增加一个 li 并让它在鼠标离开时恢复到原始状态。这可行，但是当鼠标离开时会再次悬停动画（向上），这给了我延迟和低效的代码。你们有什么建议让我提高效率吗？

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

这是因为动画是排队的，在发出新动画之前清除队列。我自己也更喜欢使用 hover() 来注册 mouseenter 和 mouseleave。

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

示例：http: //jsfiddle.net/6xXGw/