Question

I am having problems with these tabs I wrote. They seem to work fine but if mouse over them fast enough the elements begin to stack. I don’t understand why this is happening because the fade in of the next element is only supposed to happen when the first element has fired the end of its fadeout? The tabs can be found here:

http://artmodish.com/ithos/Content/us.php

$(document).ready(function(){
$('#info-tabs .inner:first').fadeIn(200);
$('#info-tabs li:first').addClass('current-tab');

$('#info-tabs li').stop().mouseover(function(){
    var current = $(this);
    $('#info-tabs li').each(function(){
        $(this).removeClass('current-tab');
    });
    current.addClass('current-tab');

    $('#info-tabs .inner').each(function (){
        var thisInner = $(this);
        if(thisInner.attr('id')==current.attr('id')) {
            $('#info-tabs div div').filter(':visible').fadeOut(500,function(){
                thisInner.fadeIn(200);
            });
        }
    });
});
});

Answer 1

The problem is the delay between setting current and using it. If you move the mouse over another tab within the 500ms animation, the handler will be called twice (with different values for current) and will show the contents for two tabs.

An easy way round this is to make current into a global variable, so that all of the animations, when they complete part 1, will show the same tab (the last one you moused over).

$(function ()
{
    var current;

    $('#info-tabs .inner:first').fadeIn(200);
    $('#info-tabs li:first').addClass('current-tab');

    $('#info-tabs li').mouseover(function ()
    {
        current = $(this);
        $("#info-tabs li").removeClass("current-tab");
        current.addClass("current-tab");
        $("#info-tabs .inner:visible").fadeOut(500, function () { $("#info-tabs .inner#" + current.attr("id")).fadeIn(200); });
    });
});

This isn’t ideal, though, as you end up with an unwanted ‘global’ variable and can build up a large animation queue (I got up to 9 with some frantic mouse movement).

I had a go at getting round this by clearing the queue at the start of the mouseover handler (and setting it to complete the animation). This kinda works (the end result’s OK), but it does give some unfortunate flashes of content on the way. Hm. (I had to move the fadeIn out of the fadeOut so I could guarantee it would be completed by the stop.)

$(function ()
{

    $('#info-tabs .inner:first').fadeIn(200);
    $('#info-tabs li:first').addClass('current-tab');

    $('#info-tabs li').mouseover(function ()
    {
        var current =  $(this);

        $("#info-tabs *").stop(true, true);    
        $("#info-tabs li").removeClass("current-tab");
        current.addClass("current-tab");
        $("#info-tabs .inner:visible").fadeOut(500);
        $("#info-tabs .inner#" + current.attr("id")).delay(500).fadeIn(200);
    });
});

(Also removed the each calls as they weren’t really necessary.)