停止滑塊Mouseout（jquery）

Question

我有一個滑塊，當我mouseover時開始滑動，但我想停止在mouseout上的幻燈片。以下是代碼HTML，CSS和Jquery。請幫我出

  `<div id="slider"> 
      <ul> 
      <li>SLIDE 1</li> 
      <li style="background: #aaa;">SLIDE 2</li> 
       <li>SLIDE 3</li> 
      <li style="background: #aaa;">SLIDE 4</li> 
       </ul> 
      </div>` 


     jQuery(document).ready(function ($) { 

     $('#slider').mouseover(function(){ 
     setInterval(function() { 
     moveRight(); 
     }, 3000); 
     }); 

     jQuery("#slider").mouseout(function(){ 
     $("#slider ul").stop().animate(); 
      }); 

     var slideCount = $('#slider ul li').length; 
     var slideWidth = $('#slider ul li').width(); 
      var slideHeight = $('#slider ul li').height(); 
      var sliderUlWidth = slideCount * slideWidth; 

      $('#slider').css({ width: slideWidth, height: slideHeight }); 

      $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

      $('#slider ul li:last-child').prependTo('#slider ul'); 

      function moveLeft() { 
      $('#slider ul').animate({ 
      left: + slideWidth 
      }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
      }); 
      }; 

      function moveRight() { 
      $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
     }); 
     }; 


     });  



     <style> 
     html { border-top: 5px solid #fff; background: #58DDAF; color: #2a2a2a; } 
     html, 
     body { margin: 0; padding: 0; font-family: 'Open Sans'; } 
     h1 { color: #fff; text-align: center; font-weight: 300; } 
     #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto;     
     border- radius: 4px; } 
     #slider ul { position: relative; margin: 0; padding: 0; height: 200px; 
     list-style: none; } 
     #slider ul li { position: relative; display: block; float: left; margin: 0; 
     padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; 
     line-height: 300px; } 
     a.control_prev, 
     a.control_next { position: absolute; top: 40%; z-index: 999; display: block; 
     padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; 
     text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; 
     cursor: pointer; } 
     a.control_prev:hover, 
     a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } 
     a.control_prev { border-radius: 0 2px 2px 0; } 
     a.control_next { right: 0; border-radius: 2px 0 0 2px; } 
     .slider_option { position: relative; margin: 10px auto; width: 160px; 
     font-size: 18px; } 
     </style> 

這將是對我幫助很大:)

預先感謝您

Answer 1

要停止動畫，存儲間隔定時器ID，並用它調用clearInterval時：

http://jsfiddle.net/sk84k/2/（感謝the_Seppi用於張貼的jsfiddle）

var timerId = 0; 

$('#slider').mouseenter(function(){ 
    timerId = setInterval(function() { 
     moveRight(); 
    }, 3000); 
}); 

jQuery("#slider").mouseout(function(){ 
    clearInterval(timerId); 
}); 

請注意，我也從mouseover更改爲mouseenter。