Javascript 鼠标悬停在长方体上时停止动画&；当鼠标退出时，将其设置回动画，不起作用

我有一个在html页面中并排显示的图像列表，这些图像被分组在一个div中。当有许多图像迫使div展开时，div将自动从左向右滚动，反之亦然

当用户将光标放在该div上时，动画应该停止，当光标熄灭时，动画应该重新开始。但它不起作用，有时停止，有时不起作用

HTML由django呈现

<div class="row" style="position: relative;">
    <div id='mainDiv' class="col-sm-12" style="">
         <h1">Title</h1><hr>
         <div style="overflow:hidden;white-space: nowrap;">

             {% for img in all_images %}
                 <div class="" style="height:200px;display:inline-block"> 
                 <img height="100" title="" src="{{img.scr}}"> 
                 </div>      
             {% endfor %}

         </div>
    </div>
</div>

--
+++ 
---   
+++   

容器组件中有mainDiv id标记。那不是你的目标

这是一个有效的：

function animatethis(targetElement, speed) {
            var scrollWidth = $(targetElement).get(0).scrollWidth;
            var clientWidth = $(targetElement).get(0).clientWidth;
            $(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
            {
                duration: speed,
                complete: function () {
                    targetElement.animate({ scrollLeft: 0 },
                    {
                        duration: speed,
                        complete: function () {
                            animatethis(targetElement, speed);
                        }
                    });
                }
            });
        };
        var sec = 20000;
        animatethis($('#mainDiv'), sec);

        $("#mainDiv").hover(function(){
            $(this).stop(true)
        });
        $("#mainDiv").mouseout(function(){
            animatethis($(this), sec);
        });

--- <div id="mainDiv" class="col-sm-12" style="">
+++ <div class="col-sm-12" style="">
---   <div style="overflow:hidden;white-space: nowrap;">
+++   <div id="mainDiv" style="overflow:hidden;white-space: nowrap;">