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/