How to slide or .animate multiple items in a div?

Question

I've coded a show/hide for a list of items as seen here https://jsfiddle.net/qbxtkyzu/ . I'm trying to animate (slide In and Out) the same items instead of just having them pop in and out.

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

and the 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();

and the css:

.trip { display: none}

Answer 1

The first parameter both show and fadeOut functions get is the time (in milliseconds) to run the animation.

In you case - you have 30 , which are 30 milliseconds - pretty fast.
If you change that to (lets say) 1000, you will see the animation:

 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 2

I'd just use CSS transitions for this. So

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

.trip.show{
  opacity: 1;
}

Then just add the class "show" to the elements rather than animating them in JS.

Answer 3

If you're looking for it to slide in from the left, you could probably do something like this:

.wrapper {
  position: relative;
}

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

.trip.visible {
  left: 0;
}

https://jsfiddle.net/xs7b6hxe/