Cannot make FadeIn and FadeOut act synchronously?

Answer 1

The code as written...

tabContainers.fadeOut('slow', function() {
    second.fadeIn('slow');
});

explicitly calls fadeIn() after fadeOut() is complete. You're passing fadeIn it as a callback to the second parameter to fadeOut, to be executed on completion.

Have you tried this?

tabContainers.fadeOut('slow');
second.fadeIn('slow');

Answer 2

EDIT: Here actually try it like this instead

tabContainers.fadeOut(500);
setTimeout("FadeInImage();", 490);

function FadeInImage()
{
    tabContainers.hide();
    second.fadeIn('slow');
}

Answer 3

Try queuing the animation instead of running it on callback:

tabContainers.fadeOut('slow').queue(function() {
    second.fadeIn('slow');
    $(this).dequeue();
});

Answer 4

I think the problem is that when you are calling the fadeOut function, some of your items are already faded-out so that it is firing immediately.

The code below is tested and works, but can be refined considerably more. I'll leave that to you:

var tabContainers = $('#tabwrap > div');
var listItems = $('#tabwrap ul.tabnav li');
tabContainers.hide();
var $selectedDiv = $("#tab1").show();

listItems.click(function() {
    var $this = $(this);
    var $myDiv = $("#" + $this.text().toLowerCase());
    if ($selectedDiv.attr("id") != $myDiv.attr("id")) {
        $selectedDiv.fadeOut('slow', function() {
            $myDiv.fadeIn('slow');
        });
        $selectedDiv = $myDiv;
    }

    $('#tabwrap ul.tabnav').removeClass('selected');
    $(this).addClass('selected');

    return false;
});