javascript - 悬停时暂停 jQuery

Question

我只希望能够在鼠标悬停时暂停动画。我试图寻找好的方法来做到这一点，但存在一些问题。我测试了一些悬停/停止功能，但无法使它们正常工作。

jQuery(document).ready(function() {
  setInterval(function() {
    jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
      if (jQuery(this).next('.slide').size()) {
        jQuery(this).next().fadeIn(1000);
      } else {
        jQuery('#testimonials .slide').eq(0).fadeIn(1000);
      }
    });
  }, 5000);
});

#quote {
  width: 100%;
  height: 130px;
  background-position: center bottom;
  background-repeat: no-repeat;
  margin-bottom: 65px;
  overflow: hidden;
}

#testimonials .slide {
  color: #555555;
}

#testimonials .testimonial-quote {
  display: inline;
  width: 600px;
  height: 170px;
  margin: 0;
  padding: 0;
  float: left;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
  <div id="testimonials">
    <div class="slide">
      <div class="testimonial-quote">
        <p>Text 1</p>
        <h4 class="title">Title 1</h4>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过在幻灯片悬停时调用 clearInterval() 来实现此目的，然后在鼠标离开幻灯片时再次重新创建间隔，如下所示:

jQuery(document).ready(function($) {
  var $slides = $('#testimonials .slide');
  
  function beginSlideInterval() {
    return setInterval(function() {
      $slides.filter(':visible').fadeOut(1000, function() {
        var $next = $(this).next().length ? $(this).next() : $slides.first();
        $next.fadeIn(1000);
      });
    }, 3000);
  }
 
  var slideInterval = beginSlideInterval();
  
  $slides.on('mouseenter', function() {
    clearInterval(slideInterval);
  }).on('mouseleave', function() {
    slideInterval = beginSlideInterval();
  });
});

#quote {
  width: 100%;
  height: 130px;
  background-position: center bottom;
  background-repeat: no-repeat;
  margin-bottom: 65px;
  overflow: hidden;
}

#testimonials .slide {
  color: #555555;
}

#testimonials .testimonial-quote {
  display: inline;
  width: 600px;
  height: 170px;
  margin: 0;
  padding: 0;
  float: left;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
  <div id="testimonials">
    <div class="slide">
      <div class="testimonial-quote">
        <p>Text 1</p>
        <h4 class="title">Title 1</h4>
      </div>
    </div>
  </div>
</div>

注意我缩短了间隔，让效果更明显。