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

.stop（true）似乎没有真正清除队列？

1 个答案: