.stop（true）似乎不能真正清除隊列嗎？

Question

我製作了這個幻燈片，當你用.stop(true)將它懸停在它上面時會暫停。當鼠標再次離開幻燈片時，它應該再次播放。從它運行的地方來看，它並不重要。 （這意味着它可以完全刪除舊的動畫隊列，然後重新開始）

的事情是，如果我現在徘徊它的動畫過後繼續，直到達到其目標。它會停下來等待動畫完成所需的時間。我不確定發生了什麼事。

HTML：

<section class="photo-grid-slideshow"> 
    <div class="photo-crop"> 
     <h3>I wanna 
      <div class="xs-spacer"></div> 
      <a class="med-btn btn-white">Read more</a> 
     </h3> 
     <div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div> 
    </div> 
    <div class="photo-crop"> 
     <h3>Dance 
      <div class="xs-spacer"></div> 
      <a class="med-btn btn-white">Read more</a> 
     </h3> 
     <div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div> 
    </div> 
    <div class="photo-crop"> 
     <h3>With you 
      <div class="xs-spacer"></div> 
      <a class="med-btn btn-white">Read more</a> 
     </h3> 
     <div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div> 
    </div> 
      <div class="photo-crop"> 
     <h3>With you 
      <div class="xs-spacer"></div> 
      <a class="med-btn btn-white">Read more</a> 
     </h3> 
     <div class="photo-grid-container" style="background-image: url('Images and videos/odesza4.jpg');"></div> 
    </div> 
</section> 

的CSS：

.photo-crop { 
    display: inline-block; 
    overflow: hidden; 
    float: left; 
    width: calc(100vw/3); 
    height: 100%; 
    padding: 0; 
    position: relative; 
    background-position: center center; 
    background-size: cover; 
    text-align: left; 
} 

.photo-grid-slideshow { 
    height: 300px; 
    display: inline-block; 
    min-width: 300%; 
    position: relative; 
    background: black; 
    padding: none; 
    overflow: hidden; 
    background: #444; 
    margin-left: 0; 
    left: 0; 
} 

腳本：

$(function(){ 
    function animate(){ 
     var p = $(".photo-grid-slideshow .photo-crop").css('width'); 
     $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 10000, "linear", function(){ 
     $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow'); 
     animate(); // here we call it again 
    }) 
    } 
    animate(); // start animation 
}) 

$(".photo-grid-slideshow").mouseenter(function() { 
    $(".photo-grid-slideshow .photo-crop:first-of-type").stop().clearQueue(); 
}) 

$(".photo-grid-slideshow").mouseleave(function() { 
    $(function(){ 
     function animate(){ 
      var p = $(".photo-grid-slideshow .photo-crop").css('width'); 
      $(".photo-grid-slideshow .photo-crop:first-of-type").animate({marginLeft: '-=' + p}, 10000, "linear", function(){ 
      $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow'); 
      animate(); // here we call it again 
     }) 
    } 
     animate(); // start animation 
    }) 
    }) 

Answer 1

這很有趣很棘手。 嗯，你的主要問題是不是已經高速緩存第一 元素的實際保證金左，所以這是因爲有一個小的時間等待。首先是 。 第一要素與動畫，所以當第一個元素是出 光網幻燈片的這種情況繼續下去動畫您在光網幻燈片徘徊之後，換句話說，當你 懸停鼠標時，停止動畫，但舉例來說，如果你停在-55px 利潤率左，並假設圖像的寬度爲200像素，那麼當你 再次運行動畫，並計算出的第一個元素的寬度，即有 255px的寬度，因爲它需要的最後一個利潤率左集和 元素的寬度，其原因停止一段時間的動畫是，在第一 元素的動畫，但出來的照片併網幻燈片的，這是當第二個 元素處於起始行時，此處停止一個nd等待第一個元素的動畫完成，因爲第一個元素需要255px才能完成動畫，並且這超過了正常。

// Get the width of the first element for once, not every time 
    var widthEl = parseInt($(".photo-crop").first().css('width')); 
    // Need an auxiliar because need cache the margin-left of the first element 
    var aux = 0; 
    // Separate the function animate it's better 
    function animate(p){ 
     // With this selector you get the first element 
     $(".photo-crop"). 
      first(). 
      animate({marginLeft: '-=' + p}, 5000, "linear", function(){ 
       $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow'); 
       // You need send the current margin-left 
       animate(p); // here we call it again 
      }); 
    }; 
    // with the chainnable option, you can chain the listeners 
    $(".photo-grid-slideshow").mouseenter(function() { 
     // Here calculate the margin-left of the first element 
     // then you can stop the animation 
     aux = widthEl - parseInt($(".photo-crop").first().stop().css("marginLeft"))*-1; 
    }).mouseleave(function() { 
     // and you can send the current margin-left of the first element. 
     animate(aux); 
    }); 
    // here you can send the width of the first element. 
    animate(widthEl); // start animation