How can i delay a .css function before animation

Question

i checked other posts similar to mine, but none of the codes worked, So how can i add some delay to .css before my animation

here you can find my code below :

  $(document).ready(function() {

        $('.div2')
        .css('visibility', 'visible') <-- // I WANT TO ADD HERE A DELAY BEFORE THE ANIMATION THAT IS BELOW STARTS !!!!
          .animate({opacity: 1.0, left: '600px'}, 2000);


        $('.div2').animate({opacity: 0.0, left: '600px'}, 2000, setInvisible);
      });

      function setInvisible() {
        $('.div2').css('visibility', 'hidden');
      }

i want to delay the css, so the div will be appeared with delay, and animation will start a bit later.

here is the Fiddle : http://jsfiddle.net/Rroni/4b56n6p1/

Answer 1

Use .delay() as shown :-

$('.div2')
    .css('visibility', 'visible')
     .delay(1000)  //this time is in milliseconds increase or decrease as required.
      .animate({opacity: 1.0, left: '600px'}, 2000);

Fiddle Demo

OR As per questioner comment, try using setTimeout() as shown :-

$(document).ready(function() {
    setTimeout(function() {
        $('.div2')
            .css('visibility', 'visible')
              .animate({opacity: 1.0, left: '600px'}, 2000);
    },1500)  //this time is in milliseconds increase or decrease as required.
});

Fiddle Demo