当鼠标在盒子上时停止动画并在鼠标离开时动画回来，不起作用答案

【问题标题】：Stop animation when mouse is over the box & animate it back when mouse is out, does not work当鼠标在盒子上时停止动画并在鼠标离开时动画回来，不起作用
【发布时间】：2019-02-03 16:09:38
【问题描述】：

我有一个图像列表，我在 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>

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);
        });

【问题讨论】：

标签： javascript jquery html css django

【解决方案1】：

--- <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;">

容器组件中有 mainDiv id 标签。这不是您要设置动画的 div。

这是一个有效的：https://codepen.io/anon/pen/KxgdWO

【讨论】：