Question

我想在悬停时碰撞一下，让它在鼠标离开时变为原始状态。这可以工作但是当鼠标离开时另一次悬停动画（向上），这给了我一个延迟和低效的代码。你们有什么建议让我更有效率吗？

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/

动画列表项更有效率

1 个答案: