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

Question

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

现在，如果我想在鼠标悬停时停止动画并在鼠标移出时继续，我该如何修改 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
});