Question

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
												

Answer 1

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