delay between animate.css animations

Question

I'm kind of new to jQuery and I'm currently trying the following:

I'm using animate.css to animate a div. What I want to do now is to define a timing between fading in and fading out. For example:

Fade in > 3 sec delay > fade out

I'm using this function to dynamically add classes from animate.css to my object (#test).

$(document).ready(function () {

    phase1('#test', 'bounceInLeft');

    function phase1(element, animation) {
        element = $(element);
                element.addClass('animated ' + animation);
    };

});

I'm trying to archive something like this:

1. phase 1 ('#test', 'bounce In Left');
2. 3 sec delay
3. phase 1 ('#test', 'bounce Out Left');
4. 1 sec delay
5. phase 1 ('#test 2 ', 'bounce In Left');
6. .....

Any kind of help is really appreciated :) Thanks in advance!

Answer 1

Yes you setTimeout. Wrap your code within this section and adjust the timing with the amount of milliseconds that you want. This allows you to stagger code timings with multiple values..

This example will delay by three seconds, then one by five seconds..

  setTimeout(function(){ 
      // place your code in here
  }, 3000);

  setTimeout(function(){ 
      // place your second bit of code in here
  }, 5000);

Answer 2

Since you are using jQuery, you can use animation chains like that

(function($){
    $(".move")
    .animate({left:"+=200"},3000)
    .delay()
    .animate({left:"+=100"},3000);
})(jQuery);

See Example

Answer 3

Using jQuery chain events

$("#id").fadeIn(1000).delay(3000).fadeOut(1000);

This should work for you. All parameters specify time 1000=1Sec

http://jsfiddle.net/k8zq2fo6/

You can increase the chain

$("#id").fadeIn(1000).delay(3000).fadeOut(1000).delay(2000).fadeIn(1000).delay(3000).fadeOut(1000).delay(2000);

Answer 4

Try utilizing .queue()

 $(function() { // load `Animate.css` $("style").load("https://raw.githubusercontent.com/" + "daneden/animate.css/master/animate.css"); // animation settings var settings = [{ "bounceInLeft": 3000 }, { "bounceOutLeft": 1000 }, { "bounceInLeft": 3000 }]; $("#test").queue("bounce", $.map(settings, function(val, key) { return function(next) { var current = Object.keys(val)[0]; $(this) // reset `className` .attr("class", "") // add `animated` , `current` `class` .addClass("animated " + current); // log `.queue("bounce")` iteration console.log(this.className, current , settings[key][current], $(this).queue("bounce")); // "delay": `settings[key][current]` , // call `next` function in `.queue("bounce")` setTimeout(next, settings[key][current]); } })) .dequeue("bounce") // do stuff when `.queue("bounce")` empty .promise("bounce") .then(function(elem) { console.log(elem.queue("bounce"), "complete") }) }); 

 #test { position: relative; display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="test">abc</div> <style></style>