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!

Answer 1

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.