June 29, 2012

The animate callback function called immediately

Question by Ajax3.14

I am using the below line to blink a block. It works but the callback function incre() is called immediately and does not wait till blinking is over.

I need to call incre() only after the animate function blinks 2 seconds. What am I missing?

block.attr({ opacity: 0.3 }).animate({ opacity: 1 }, 2000,incre());

Answer by Starx

For what you are attempting fadeTo() sounds like a good choice

block.fadeTo(2000, 0.3, function() {
    block.fadeTo(2000, 1);
});

Demo

However, the error in your codes are:

  • the () (Brackets after the callback function name) i.e. incre()
  • opacity is a CSS property not an attribute. so user .css() to manipulate them

The correct codes are:

block
   .css({ opacity: 0.3 })
   .animate({ opacity: 1 }, 2000, incre);

Working Demo

...

Please fill the form - I will response as fast as I can!