JQuery анимация отображается только при перемещении мыши.

Я понятия не имею, почему это происходит, и я уже искал его. Я сделал слайд-шоу, который прокручивает самый левый элемент за пределами экрана, а затем добавляет его в конец контейнера. Сама эта функция работает так, как ожидалось. Однако анимация показывает, когда я двигаю мышью, поэтому здесь что-то не так.JQuery анимация отображается только при перемещении мыши.

Любая идея о чем?

без перемещения мыши: 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); 
});

Я очень благодарен, если вы поможете мне заставить это работать. :)

источник

2016-01-30 Emric Månsson

Нужно ли вам [это] (https://jsfiddle.net/Lojuhpbx/) – Satpal

Я так думаю, так как он сначала устанавливает отрицательный марж, а затем должен его сбросить, прежде чем перемещать его вправо. –

@Mitch Как это могло бы быть быть хоть? У меня не было этой проблемы с той же самой анимацией, но на контейнере. Нет проблем. :( –

Я получил его работать как минимум. Проблема заключалась в том, что класс .photo-crop имел переход: ВСЕ на нем. Из-за этого он не мог анимировать его в jquery. Глупая ошибка, но для меня это не было очевидно.

Надеюсь, это поможет кому-то еще в будущем!

источник

2016-01-30 17:56:53

JQuery анимация отображается только при перемещении мыши.

ответ

Смежные вопросы