Цикличная смена текста с анимацией (jQuery)

406
02 мая 2017, 04:28

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

$(document).ready(function() { 
    $('.welcome-text .meet').eq(0).addClass('active').fadeIn(50); 
 
    setInterval('blockAnimate();', 4000); 
}); 
 
 
function blockAnimate() { 
    var length = $('.welcome-text .meet').length - 1; 
    $('.welcome-text .meet').each(function(index) { 
        if($(this).hasClass('active') && index != length) { 
            $(this).removeClass('active').fadeOut(250).next('.meet').addClass('active').fadeIn(250); 
            return false; 
        } else if (index == length) { 
            $(this).removeClass('active').fadeOut(250); 
            $('.welcome-text .meet').eq(0).addClass('active').fadeIn(250); 
            return false; 
        } 
    }); 
};
.meet { 
  color: black; 
  font-size: 18px; 
  font-weight: 200; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="welcome-text"> 
    <div class="meet">Встречайте,</div> 
    <div class="meet">Meet,</div> 
    <div class="meet">Wilkomen,</div> 
</div> 
<p> 
Я контент, посмотри, как я двигаюсь здесь.

Answer 1

$(document).ready(function() { 
  setInterval('blockAnimate();', 3000); 
}); 
 
function blockAnimate() { 
  $('.active').removeClass('upnext') 
  let active = $('.active'); 
  active.addClass('up'); 
  let next = $('.active').next('li').length ? $('.active').next('li') : $('.welcome-text li').first(); 
  $('.active').removeClass('active'); 
  next.addClass('upnext active'); 
  active.addClass('hiddenclass') 
 
 
 
}
.welcome-text { 
  position: relative; 
  background: blue; 
  width: 150px; 
  height: 50px; 
  text-align: center; 
  overflow: hidden; 
} 
 
.hiddenclass { 
  display: none; 
} 
 
.active { 
  display: block; 
} 
 
.meet { 
  top: 17px; 
  color: #fff; 
  font-size: 20px; 
  font-weight: bold; 
  position: absolute; 
} 
 
.next { 
  display: block; 
  top: 60px; 
  color: #fff; 
  font-size: 20px; 
  font-weight: 200; 
  position: absolute; 
} 
 
.up { 
  display: block; 
  animation-name: moveup; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
} 
 
.upnext { 
  display: block; 
  animation-name: moveupnext; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
} 
 
@keyframes moveup { 
  0% { 
    top: 17px; 
  } 
  100% { 
    top: -50px; 
  } 
} 
 
@keyframes moveupnext { 
  0% { 
    top: 60px; 
  } 
  100% { 
    top: 17px; 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="welcome-text"> 
  <li class="meet start active">start</li> 
  <li class="meet Meet hiddenclass">Meet</li> 
  <li class="meet Wilkomen hiddenclass">Wilkomen</li> 
</ul> 
Я контент, посмотри, как я двигаюсь здесь.

READ ALSO
Растянуть блок на всю высоту Landing page
HTML

Растянуть блок на всю высоту Landing page

У меня на Landing'e блок типа хедера находится слева, и он должен продолжаться на весь landingУже пробовал по разному, но кроме фиксированной высоты...

 347
Каким образом сделать подобное?
HTML

Каким образом сделать подобное?

Подскажите как лучше(профессиональней) сделать подобное?

 294
Как выровнять по центру?
HTML

Как выровнять по центру?

Есть div блок и 4х4 div блока в нём

 329
Не работает font-awesome из npm
HTML

Не работает font-awesome из npm

Поставил font-awesome так: npm install --save font-awesomeПосле этго пытаюсь получить картинку:

 292