У меня есть сценарий для анимации содержимого при прокрутке. Но я запустил этот скрипт без реальной прокрутки. Это влияет на анимацию, вызывая 2 раза. И мой блок 2 раза меняет непрозрачность от 0 до 1, и похоже, что он вибрирует.

.service-item {
    display: block;
    min-height: 175px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
    top: 0;
    opacity:0;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}


$(window).scroll(function(e) {
    console.log(e);
    if(windowBottom > $('#services').offset().top+100) {
        $('.services .container').addClass("fadeInUp").addClass("animated");
        var delay = 0;
        $('.service-item').each(function(){
            var portfolioImageOffset = $(this).offset().top;
            if(portfolioImageOffset < windowBottom) {
                $(this).delay(delay).animate({
                    opacity:1
                },200);
                delay += 200;
            }
        });
    }
}

Для вывода: перейдите на страницу http://ldrp.890m.com/personal и прокрутите вниз до службы или наш рабочий раздел.

0
Deepak Chaudhary 14 Дек 2017 в 11:50

1 ответ

Лучший ответ

В своей функции $('.service-item').each() вы можете попытаться добавить что-то с данными, чтобы проверить, было ли оно уже анимировано или нет. Вот так :

$('.service-item').each(function(){
   if($(this).data('animated') != 'animated') {
      var portfolioImageOffset = $(this).offset().top;
      if(portfolioImageOffset < windowBottom) {
         $(this).delay(delay).animate({
            opacity:1
         },200);
         delay += 200;
         $(this).data('animated','animated');
      }
   }
});

Подскажите, работает ли! :)

1
Noémie Kerroux 14 Дек 2017 в 09:04