使用javascript在鼠标悬停时停止动画

Question

我有一个div，其中某些控件是从数据库获取数据后动态添加的。 它有点新闻细节将被添加。 我只是想通过javascript自动滚动新闻。

现在，如果我想在mouseover上停止动画并继续mouseout，我该如何修改javascipt。

这是我的html页面：

<section id="secbody" runat="server" style="position:absolute; background-color:dimgray; max-height:183px; min-height:183%;margin-top:14px;margin-left:545px;width:535px;">

      <div id="galheader" style="width:535px;" runat="server">
         <label id="Label1" style="color:White; position:absolute; font-size:20px; left:20px;  height: 26px; width: 100%;" runat="server"> Upcoming Programs</label> 
</div>

    <section id="secdetails" runat="server" style="font-family:'Palatino Linotype';color:white; min-width:500px;overflow-wrap:break-word;background-attachment:fixed;position:absolute;margin-top:25px;"></section>
    </section>    

这是我的javascript

    <script type="text/javascript">

        $(document).ready(function(){
            function marqueePlay(){
                $("#secdetails").animate(
                    {
                        top: $("#secbody").height() - $("#secdetails").height(),
                        opacity: 1
                    }, 4000, function(){
                        $("#secdetails").css("top", 1);
                        $("#secdetails").css("opacity", 1);
                        marqueePlay();
                    }
                );
            }
            marqueePlay();

});

    </script>

我知道我们需要使用.stop功能，但不知道使用它的正确方法。

Answer 1

您可以使用.hover()函数来完成任务

尝试，

$("#secdetails").hover(function(){
   $(this).stop(); //Stop the animation when mouse in
},
function(){
   marqueePlay(); //Start the animation when mouse out
});

Answer 2

这个怎么样？

function stopAnimation(){
    $("#secdetails").stop();
}

<div id="secdetails" onmouseout="marqueePlay()" onmouseover="stopAnimation()"></div>