JQuery animations appear only when you move the mouse.

Question

I have no idea why this is happening, and I already entered Google. I did a slide show that scrolls the leftmost element off the screen and then adds it to the end of the container. This function itself works as expected. However, the animation shows when I move the mouse, so something is wrong here.

Any idea on what?

Without moving the mouse: https://gyazo.com/78048123b10e1d2683b102419761c0ef When moving the mouse: 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);
 });

I am very grateful if you help me make this work. :)

Answer 1

, , . , .photo-crop : ALL. - jquery. , .

, - !