CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Williams Emmanuel
Williams Emmanuel

Reputation: 23

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

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}

Upvotes: 2

Views: 386

Answers (3)

jas7457
jas7457

Reputation: 1782

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/

Upvotes: 0

CourtDemone
CourtDemone

Reputation: 5912

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.

Upvotes: 1

Dekel
Dekel

Reputation: 62536

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>

Upvotes: 2

Related Questions