javascript - js动画执行问题？

Question

  //nav滑动current
    var s_indexli = '.menusinfo li';
    $('.menusinfo li').hover(function() {
        var w = 0;
        j = $(this).index();
        var firstOffset = $('.menusinfo li:eq(0)').offset().left;

        for (var i = 0; i <= j; i++) {
            w += $(s_indexli + ":eq(" + i + ")").outerWidth();
        }

        currentEml = ($(s_indexli + ":eq(" + j + ")").outerWidth()) / 2;

        $(".menus-buoy").animate({
            'left': firstOffset + w - currentEml - 20.5
        }, 400);

    });
    
    滑动经过li会多次触发animate，
    怎么让他只执行前，清除之前正在执行的animate

Answer 1

.stop()

Answer 2

提供一种思路：

var s_indexli = '.menusinfo li';
var TF = true;// add1

    $('.menusinfo li').hover(function() {
        var w = 0;
        j = $(this).index();
        
        var firstOffset = $('.menusinfo li:eq(0)').offset().left;

        for (var i = 0; i <= j; i++) {
            w += $(s_indexli + ":eq(" + i + ")").outerWidth();
        }

        currentEml = ($(s_indexli + ":eq(" + j + ")").outerWidth()) / 2;
        
        if(TF){// add2
            $(".menus-buoy").animate({
                'left': firstOffset + w - currentEml - 20.5
            }, 400,function(){
                TF = false;// add3
            });
        };

    });

Answer 3

使用:animated

$(".menus-buoy:animated").stop()
$(".menus-buoy").animate({
            'left': firstOffset + w - currentEml - 20.5
        }, 400);

Answer 4

在animate前面加stop()