我正在用stop（）打断重复的jquery动画，这样悬停就会阻止旋转木马移动，但是，它会停止动画本身

Question

这个旋转木马上的一切都有效，除了在动画滑动时应用stop（），有没有办法防止动画在悬停时发生（就像现在一样）而不是在滑动过程中发生的动画效果？

var roundabout = setInterval(function(){
        spin()
        }, 3000);
        function spin(){
            var kerosene = document.getElementById('carousel-frame-holder');
            var s = kerosene.offsetLeft;
                if (s >= -1700 ){
                    $("#carousel-frame-holder").animate({left: (s - 600 +'px')});
                    }
                else{
                    $("#carousel-frame-holder").animate({left: (s + 1800 +'px')});
                    };


                //  interruption
                $('#carousel-view-window').hover(function(){
                    //Stop Animation here
                    $("#carousel-frame-holder").stop();
                    clearInterval(roundabout);
                  }, function(){
                    //Restart Animation here
                    roundabout = setInterval(function(){spin()}, 3000);
                }); 
                //end interruption

                var carouselInerta = s;
                $('#bastion').html(carouselInerta);
                //location 1
                if (s == -1800) {$('#f1').addClass('active')}
                else {$('#f1').removeClass('active')}
                //location 2
                if (s == 0) {$('#f2').addClass('active')}
                else {$('#f2').removeClass('active')}
                //location 3
                if (s == -600) {$('#f3').addClass('active')}
                else {$('#f3').removeClass('active')}
                //location 4
                if (s == -1200) {$('#f4').addClass('active')}
                else {$('#f4').removeClass('active')}               
                };


//wrap-round
$('#nav-left').click(function(){
    var kerosene = document.getElementById('carousel-frame-holder');
    var s = kerosene.offsetLeft;
    if (s <= -1 ){
        $("#carousel-frame-holder").animate({left: (s + 600 +'px')});
        }
    else {
        $("#carousel-frame-holder").animate({left: (s - 1800 +'px')});
        };
    });
$('#nav-right').click(function(){
    var kerosene = document.getElementById('carousel-frame-holder');
    var s = kerosene.offsetLeft;
    if (s >= -1700 ){
        $("#carousel-frame-holder").animate({left: (s - 600 +'px')});
        }
    else {
        $("#carousel-frame-holder").animate({left: (s + 1800 +'px')});
        };
});

//location
$("#f1").on("click", function(){
        {$('#f1').addClass('active')}
        {$('#f2').removeClass('active')}
        {$('#f3').removeClass('active')}
        {$('#f4').removeClass('active')}
        $("#carousel-frame-holder").stop();
        clearInterval(roundabout);
        $("#carousel-frame-holder").animate({left: (0 +'px')})
    });
$("#f2").on("click", function(){
        {$('#f2').addClass('active')}
        {$('#f1').removeClass('active')}
        {$('#f3').removeClass('active')}
        {$('#f4').removeClass('active')}
        $("#carousel-frame-holder").stop();
        clearInterval(roundabout);
        $("#carousel-frame-holder").animate({left: (-600 +'px')})
    });
$("#f3").on("click", function(){
        {$('#f3').addClass('active')}
        {$('#f2').removeClass('active')}
        {$('#f1').removeClass('active')}
        {$('#f4').removeClass('active')}
        $("#carousel-frame-holder").stop();
        clearInterval(roundabout);
        $("#carousel-frame-holder").animate({left: (-1200 +'px')})
    });
$("#f4").on("click", function(){
        {$('#f4').addClass('active')}
        {$('#f2').removeClass('active')}
        {$('#f3').removeClass('active')}
        {$('#f1').removeClass('active')}
        $("#carousel-frame-holder").stop();
        clearInterval(roundabout);
        $("#carousel-frame-holder").animate({left: (-1800 +'px')})
    });