Question

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

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
    // Parse
    compile 'com.parse.bolts:bolts-android:1.2.1'
    compile 'com.parse:parse-android:1.10.3'
    compile project(':ParseUI-Widget')
}

Answer 1

这里有两个主要问题：

clearInterval不会停止jquery的动画，只会停止setInterval次调用，以便队列中不再添加动画。您已经管道并仍处于待处理状态的每个动画仍将运行。当它们全部完成时它将停止。
您没有为setInterval提供任何给定时间。因此，提供的功能将像您的浏览器一样快速重复调用。这是一个可怕的错误，因为你最终会在队列中有大量的待处理动画。您正在以比实际消耗更快的方式管理新动画。

这应该有效：

＆＃13;

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

＆＃13;

#Slides{
    background-color:yellow;
    padding-top: 150px;
    height: 20px;
}
#Serv-Slides{
    background-color: red;
    height: 20px;
}

＆＃13;

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

＆＃13;

您也可以考虑将css animations与@keyframes一起使用。使用:hover伪类，您甚至不需要任何JavaScript。这可能会更高效，我个人觉得它更优雅，更容易，更灵活。以下是一个示例（您可能需要为旧浏览器添加css前缀＆＃39;支持）：

＆＃13;

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

＆＃13;

<div id="Slides">
   <div id="Serv-Slides"></div>
</div>

＆＃13;

设置和清除间隔滑块jQuery

1 个答案: