设置和清除间隔滑块jQuery [英] Set and Clear interval slider jQuery

问题描述

我试图制作一个简单的两个图像滑块，可以自动滑动。当用户悬停进去时，它应该停下来，如果他/她徘徊在外，它会继续正常工作。我尝试使用set和clearInterval，但滑块不会在悬停时暂停。我应该如何编写代码才能使其工作？

  var $ Slides = $（＃EServices）; //或者var $ Slides = $（＃Serv-Slides）; 
 var interval; 
函数StartSlider（）{
 interval = setInterval（function（）{
 $（＃Serv-Slides）。animate（{marginTop：0px}，200）。延迟（2000）; 
 $（＃Serv-Slides）。animate（{marginTop：-150px}，200）.delay（2000）; 
}）; 
} 
 
函数StopSlider（）{
 clearInterval（interval）; 
 
 $ b $ Slides.on（'mouseenter'，StopSlider）.on（'mouseleave'，StartSlider）; 
 StartSlider（）; 
  

解决方案

这里有两个主要问题：

$ b

1. clearInterval 不会停止 jquery 的动画，它会停止 setInterval 调用，这样就不会在队列中添加更多的动画。您已经管理并且仍在等待处理的所有动画仍将运行。它们会在所有这些完成时停止。

您没有为 setInterval 。因此，所提供的功能将会像浏览器一样快速地被调用。这是一个可怕的错误，因为您最终会在队列中出现大量未决动画。您正在管理新动画的速度比实际消耗的速度快得多。
$ b

b
$ b

  var interval; function startSlider（）{function animate（）{$（＃Serv-Slides）。animate（{marginTop：0px} ，200）.delay（2000）.animate（{marginTop：-150px}，200）; //.delay(2000）; //最后的延迟是无用的，它由setInterval管理。 } //现在开始第一个动画。动画（）; //设置与动画和延迟时间相匹配的时间间隔。 interval = setInterval（animate，200 + 2000 + 200 + 2000）;} function stopSlider（）{//避免进一步添加动画。 clearInterval（间隔）; //停止当前正在运行的动画。 $（＃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>


$ b

您也可以考虑使用 css动画 with @keyframes 。使用 ：hover 伪类，你甚至不需要任何JavaScript。这可能会更高效，我个人觉得它更优雅，更简单，更灵活。下面是一个例子（您可能需要为旧浏览器的支持添加css前缀）：





#Slides {background-颜色：黄色; padding-top：150px; height：20px;}＃Serv-Slides {background-color：red; height：20px;动画持续时间：4秒;动画名称：上下;动画迭代计数：无限;}＃幻灯片：悬停＃服务幻灯片{动画播放状态：暂停;} @关键帧向上和向下{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>

$ b

I'm trying to make a simple two image slider that auto slides up and down. When the user hovers into it it should stop and if he/she hovers out of it, it continues to function normally. I tried using set and clearInterval but the slider doesn't pause on hover. How should I write the code to make it work?

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

解决方案

There is two main problems here:

1. clearInterval does not stop jquery's animation, it will just stop your setInterval calls so that no further animation are added in the queue. Every animations that you already piped and that are still pending will still be run. It will stop when all of them are finished.

2. You did not provided any given time for your setInterval. As a result, the provided function will be repeatedly called as fast as your browser can. This is a terrible mistake because you will end up with a massive amount of pending animations in the queue. You are piping new animations much much faster than they are actually consumed.

This should work:

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>

You may also consider using css animations with @keyframes instead. Using the :hover pseudo-class you don't even need any JavaScript. This is likely to be more performant and I personally find it more elegant, easier and more flexible. Here is an example (you may need to add css prefixes for older browsers' support):

#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>

这篇关于设置和清除间隔滑块jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！