Question

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

知道什么？

不移动鼠标：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类有转换： ALL 就可以了。因此，它无法在jquery中对其进行动画处理。愚蠢的错误，但对我而言，它并不明显。

希望将来可以帮助其他人！

Jquery动画仅显示鼠标移动的时间。

1 个答案: