Question

On my page I have multiple div’s with the class name course. Then there is one div by itself with the id dateForm.

What I want to do is append dateForm into whatever instance of a course div that I click on. What it should do is fadeOut from its current location, move (appendTo) to its new location and then fadeIn.

However, it ALWAYS appends itself to its new location, then fades out and fades back in. Any idea why the chain isn’t working? I’ve tried delays, I’ve tried moving appendTo into another method and calling it on the callback of fadeOut, but nothing works. I even tried inserting an alert() after fadeout, but the alert() message appears before the fadeOut function even runs. Any ideas?

          $(".course").click(function () {
            $("#dateForm").fadeOut("slow").appendTo($(this)).fadeIn("slow");
          });

Answer 1

The problem is that fadeOut returns immediately, before the animation has finished. You should use the callback argument to run code after the animation is complete:

$('.course').click(function(e){
    $("#dateForm").fadeOut("slow", function() { // code to run after the fadeOut is complete
        $(this).appendTo(e.target).fadeIn('slow');
    })
});