Необходимо, чтобы определенный список текста циклично менялся аккуратной анимацией по времени. Сейчас вот такая картина, из-за чего список сначала выводится полностью, затем убирается по одной из всех строк, а затем меняется, но не той анимацией, и смена контента влечет за собой "дерганье" всех элементов ниже данного текста. Сделал гифку, чтобы сверять.
$(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>
Я контент, посмотри, как я двигаюсь здесь.