JQuery fadeto animation with callback problem

Question

Hello guys!

Here's my code:

function hideColumnAndShowOther(columnToHide, columnToShow) {
$(columnToHide).fadeTo("slow", 0.0, function() {
                       $(columnToShow).fadeIn("slow");
                       });
}

In this case the callback function isn't called. I have used the firebug tool to get the root of the problem. In the callback function the 'columnToShow' variable is not present. I think it is logical because it is a separate block, but how can I solve this then? Do you have any tip?

Thanks!

Answer 1

The problem is the columnToShow variable is out of scope. It means nothing at that point. Instead try $(this).fadeIn("slow").

The $(this) refers to the element that you have just faded as the callback function is attached to that element.

EDIT: (misread the question)

If you change it something like the following it should work.

function hideColumnAndShowOther(columnToHide, columnToShow) {
    var showColumn = columnToShow;
    $(columnToHide).fadeTo("slow", 0.0,
        function() {
           $(showColumn).fadeIn("slow");
        });
}