javascript - Jquery 动画仅在鼠标移动时显示。

Question

我不知道为什么会这样，我已经用谷歌搜索过了。我制作了一个幻灯片，将最左边的元素滚动到屏幕外，然后将其附加到容器的末尾。该功能本身似乎按预期工作。但是，动画仅在我移动鼠标时显示，所以这里出了点问题。

知道什么了吗？

不移动鼠标:https://gyazo.com/78048123b10e1d2683b102419761c0ef 移动鼠标时:https://gyazo.com/f10bf8a10bc119840bd6b5b1168e79db

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>
    </section>

CSS:

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

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

Javascript:

 $(function () {
     var timer = setInterval(function() {
        $(".photo-grid-slideshow .photo-crop:first-child").animate({marginLeft: '-=33vw'}, 1000, "linear", function() {
            $(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
        });
    }, 1000);
 });

如果你能帮助我完成这项工作，我将不胜感激。 :)

Answer 1

至少我让它工作了。问题是 .photo-crop 类有 transition: ALL 。因此，它无法在 jquery 中为其设置动画。愚蠢的错误，但对我来说并不明显。

希望这对以后的其他人有帮助!