Cannot make FadeIn and FadeOut act synchronously?

I'm trying to use jquery to animate between two images, fading one out then fading the other in.

However, I cannot get them to act syncronously, the fadeIn() always gets called before the fadeOut() is complete:

$(function() {
            var tabContainers = $('#tabwrap > div');
            var listItems = $('#tabwrap ul.tabnav li');
            listItems.click(function() {
                var second = tabContainers.filter($(this)[0].title);
                tabContainers.fadeOut('slow', function() {
                    second.fadeIn('slow');
                });


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

            return false;
        }).filter(':first').click();

        listItems.hover(function() {
        });
    });

<开发者_如何学编程div>
        <div id="tabwrap">
            <div id="tab1">
                Tab1</a>
            </div>
            <div id="tab2">
                Tab2</a>
            </div>
            <div id="tab3">
                Tab3</a>
            </div>
            <div id="tab4">
                Tab4</a>
            </div>
            <ul class="tabnav">
                <li title="#tab1" style="cursor: pointer;">Tab1</li>
                <li title="#tab2" style="cursor: pointer;">Tab2</li>
                <li title="#tab3" style="cursor: pointer;">Tab3</li>
                <li title="#tab4" style="cursor: pointer;">Tab4</li>
            </ul>
        </div>
    </div>

Any ideas?

Cheers, Ed

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;
});

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');

Try queuing the animation instead of running it on callback:

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

Another way to get jQuery to wait for animation to end is the promise() method. Which, is great when another section of the code needs to wait and you don't have a handle on the objects you're supposed to wait for, you can get them with a jQuery selector and then call promise to wait on all of the returned objects to finish.

E.g. $('.animating').promise().done(function( arg1 ) { alert( "Done animating."); });