设置和清除间隔滑块jQuery

Set and Clear interval slider jQuery

本文关键字：jQuery 清除 设置      更新时间：2023-09-26

我想做一个简单的两个图像滑块，自动上下滑动。当用户停留在它应该停止，如果他/她停留在它之外，它继续正常工作。我尝试使用set和clearInterval，但滑动条在悬停时不会暂停。我应该如何编写代码使其工作?

var $Slides = $("#EServices"); //Or var $Slides = $("#Serv-Slides");
var interval;
function StartSlider() {
interval = setInterval(function () {
        $("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000);
        $("#Serv-Slides").animate({ "marginTop": "-150px" }, 200).delay(2000);
    });
}
function StopSlider() {
    clearInterval(interval);
}
$Slides.on('mouseenter', StopSlider).on('mouseleave', StartSlider);
StartSlider();

这里有两个主要问题:

  1. clearInterval不会停止jquery的动画，它只会停止你的setInterval调用，这样就不会在队列中添加进一步的动画。每一个你已经管道化并且仍然挂起的动画都将继续运行。

  2. 您没有为您的setInterval提供任何给定的时间。因此，所提供的函数将以浏览器最快的速度被重复调用。这是一个可怕的错误，因为你最终会在队列中有大量待处理的动画。

这个应该可以工作:

var interval;
function startSlider() {
  function animate(){
    $("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000)
                     .animate({ "marginTop": "-150px" }, 200); //.delay(2000);
    // Last delay is useless, it is managed by the setInterval.
  }
  // Start the first animation right now.
  animate();
  // Set an interval that matches the animations and the delays duration.
  interval = setInterval(animate, 200 + 2000 + 200 + 2000);
}
function stopSlider() {
  // Avoid any further animation to be added.
  clearInterval(interval);
  // Stop the currently running animations.
  $("#Serv-Slides").stop(true);
}
$("#Slides").on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
#Slides{
    background-color:yellow;
    padding-top: 150px;
    height: 20px;
}
#Serv-Slides{
    background-color: red;
    height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Slides">
   <div id="Serv-Slides"></div>
</div>

你也可以考虑使用css动画与@keyframes代替。使用:hover伪类，您甚至不需要任何JavaScript。这可能会更高效，而且我个人认为它更优雅、更容易、更灵活。下面是一个示例(您可能需要添加css前缀以获得旧浏览器的支持):

#Slides{
    background-color:yellow;
    padding-top: 150px;
    height: 20px;
}
#Serv-Slides{
    background-color: red;
    height: 20px;
    animation-duration: 4s;
    animation-name: up-and-down;
    animation-iteration-count: infinite;
}
#Slides:hover #Serv-Slides{
    animation-play-state: paused;
}
@keyframes up-and-down {
    0%  { margin-top: 0px; }
    45% { margin-top: 0px; }
    50% { margin-top: -150px; }
    95% { margin-top: -150px; }
}
<div id="Slides">
   <div id="Serv-Slides"></div>
</div>

相关文章：