JS and Animate.css interval Issue

Question

I am using animate.css for a feed. I have a div named feed that uses uses the slideInLeft class, remains for 3 seconds, then uses the fadeOut class. At this point, I need to change the content of the div and start again. Here's what I've got:

HTML:

<div id="feed"></div>

JS:

var myCars=new Array("Saab","Volvo","BMW");
var wIndex = 0;
$('#feed').text(myCars[wIndex]);
setInterval(function () {
    ++wIndex;
    if (wIndex >= myCars.length) {
        wIndex = 0;
    }   
    $('#feed').removeClass('animated slideInLeft');
    $('#feed').addClass('animated fadeOut').addClass('hidden');
    $('#feed').text(myCars[wIndex]);
    $('#feed').removeClass('animated fadeOut').removeClass('hidden');
    $('#feed').addClass('animated slideInLeft');
}, 3000);

http://jsfiddle.net/tjfo/5a3SL/

The initial change from the first element in the array to the second works properly, fade out, slide in. All the following transitions just change the text in the div with no fade out, slide in. Animate.css is the preferred method for completing this task. Can anyone help figure out how to make it work properly?

Thanks!

The fact that it works once means that somewhere in your adding and removing classes you are changing the state of the element and not taking it back to its initial state. If you do take it all the way back to its initial state in each loop, you'll have a working script. Hint: focus on the animated class. — Jasper
– Jasper, Commented Feb 25, 2014 at 23:00
that makes a lot of sense. I tried adding 1 second delays to the class changes though and increasing my interval to 5 seconds and I still get the same behavior. Any thoughts on how to set them properly? — tjfo
– tjfo, Commented Feb 25, 2014 at 23:03

Jasper · Accepted Answer · 2014-02-25 23:09:06Z

I think you're looking to remove the animated and slideInLeft classes prior to applying subsequent classes. Maybe remove those classes right off, then in a timeout of say, 25ms, do the rest of the logic.

Here's a demo: http://jsfiddle.net/5a3SL/3.

When animating with CSS this is a fairly common thing since you need to give the browser time to calculate the new layout without those classes before applying new classes, otherwise the correct state won't exist in the layout for the new class to properly animate.

Also, that honestly seems like too much CSS for a simple animation... the trickiest thing about animations is having to re-write your CSS declarations for 4 different vendor prefixes as well as the standard declaration.

Another way to handle this would be to set a timeout at the end of the loop that is at least as long as the animation (the slide-in) and remove the unnecessary classes then.

Collectives™ on Stack Overflow

JS and Animate.css interval Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related