div内の複数のアイテムをスライドまたはアニメーションする方法は？

Question

ここに表示されているように、アイテムリストの表示/非表示をコーディングしました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} 

Answer 1

すると、あなたが探している場合は、おそらくこのような何かを行うことができます：

.wrapper { 
    position: relative; 
} 

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

.trip.visible { 
    left: 0; 
} 

https://jsfiddle.net/xs7b6hxe/

Answer 2

両方showとfadeOut機能が得る最初のパラメータは、アニメーションを実行する時間（ミリ秒）です。

あなたには、30があります。これは30ミリ秒です。かなり高速です。
あなたは1000（言うことができます）に、あなたがアニメーション表示されることに変更した場合：私はちょうどこのためにCSSトランジションを使用すると思い

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>

Answer 3

を。したがって

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

.trip.show{ 
    opacity: 1; 
} 

JSでアニメーション化するのではなく、要素に「show」クラスを追加するだけです。それが左サイドからスライドさせるため