Блог

Я закодировал отображение / скрытие для списка элементов, как показано здесьhttps://jsfiddle.net/qbxtkyzu /. Я пытаюсь анимировать (вставлять и выводить) одни и те же элементы вместо того, чтобы просто вставлять и выводить их.

 <div id="main">
    <div>
    Base Text /
    </div>
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
</div>
  

и javascript:

 var $elem = $('#main .trip'), l = $elem.length, i = 0;
function go() {
$elem.eq(i % l).delay(5000).show(30, function() {
    $elem.eq(i % l).delay(5000).fadeOut(30, go);
    i  ;
  })
}

go();
  

и css:

 .trip { display: none}
  

Первый параметр, который получают show и fadeOut функции, — это время (в миллисекундах) для запуска анимации.

В вашем случае — у вас есть 30 , которые составляют 30 миллисекунд — довольно быстро.
Если вы измените это значение на (допустим) 1000, вы увидите анимацию:

 var $elem = $('#main .trip'), l = $elem.length, i = 0;

function go() {
    $elem.eq(i % l).delay(2000).show(1000, function() {
        $elem.eq(i % l).delay(2000).fadeOut(1000, go);
        i  ;
    })
}

go();  

 .trip { display: none}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div>
    Born To /
    </div>
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
</div>  

Я бы просто использовал CSS-переходы для этого. Итак

 .trip{
  transition: opacity 1s;
  opacity: 0;
}

.trip.show{
  opacity: 1;
}
  

Затем просто добавьте класс «show» к элементам, а не анимируйте их в JS.

Если вы хотите, чтобы он скользил слева, вы, вероятно, могли бы сделать что-то вроде этого:

 .wrapper {
  position: relative;
}

.trip { 
  transition: left 2s;
  position:absolute;
  left: -100%;
}

.trip.visible {
  left: 0;
}
  

https://jsfiddle.net/xs7b6hxe/