Question

我刚编写了一个在javascript中有动画的菜单。该脚本可以正常工作，但我不喜欢这样，如果你从上到下通过这些项目，菜单会变得非常错误并且文本开始像疯了一样显示。一种可能的解决方案是，当鼠标进入列表项时，它必须有一定的延迟才能启动动画（例如，你必须让鼠标在那里3秒，如果没有，没有任何反应）。 setTimeout不会这样做，因为无论如何它都会执行动画。我想知道是否有一项工作，因为我不能提出任何。

这是执行动画的代码：

$( '.menu li a' ).hover( function(){
        var el = $(this);
        var numero = el.parent().index();
        el.animate({
            'height': height[numero]+'px'
        }, 'slow');
    }, function(){
        $(this).animate({
            'height': 0
        }, 'slow');
    });

jsfiddle here

我试图在不使用css Transitions的情况下尝试此操作。非常感谢你！

Answer 1

尝试使用.stop()，

停止上一个动画队列

    $( '.menu li a' ).hover( function(){
        var el = $(this);
        var numero = el.parent().index();
        el.stop().animate({
            'height': height[numero]+'px'
        }, 'slow');
    }, function(){
        $(this).stop().animate({
            'height': 0
        }, 'slow');
    });

Javascript动画菜单错误

1 个答案:

DEMO