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

这很有趣也很棘手。 那么你的主要问题是没有缓存第一个的实际边距 元素，所以那是因为有一小段等待时间。 第一的。 第一个元素是动画的，所以当第一个元素不在 photo-grid-slideshow 这会在您将鼠标悬停在 photo-grid-slideshow 中后继续动画，换句话说，当您 悬停鼠标，动画停止，但是例如，如果你停在 -55px margin-left，假设图片的宽度是200px，那么当你 再次运行动画，计算第一个元素的宽度 255px 的宽度，因为它需要最后一个 margin-left 集和 元素，动画停止一段时间的原因，第一个 元素是动画但不在照片网格幻灯片中，这是第二个 元素在起始行，停在那里等待第一个动画 元素完成，因为第一个元素需要 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