How do you get JQuery to wait until an effect is finished?

Question

I am sure I read about this the other day but I can't seem to find where. I have a fadeOut event after which I remove the element and JQuery is removing the elemnt before it has a chance to finish fading out. What is the solution to this again?

Answer 1

You can specify a callback function:

$(selector).fadeOut('slow', function() {
    // will be called when the element finishes fading out
    // if selector matches multiple elements it will be called once for each
});

Documentation here.

Answer 2

not working, still plays both animations at the same time.

heres code:

$('a#cl-snp').click(function() {
    $('.portItem').fadeOut('400', function() {
      $('#snp').fadeIn('400');
      return false;
    });
});

Answer 3

if its something you wish to switch, fading one out and fading another in the same place, you can place a {position:absolute} attribute on the divs, so both the animations play on top of one another, and you don't have to wait for one animation to be over before starting up the next.