JQuery исчезают в том же пространстве

Я создаю сайт, на котором у меня есть область с вкладками (три вкладки), которые при наведении курсора исчезают в разных размах высоты.

Страница загружается с помощью скрытых div и только для того, чтобы затухать в соответствующем div, когда ссылка зависает. Если какой-либо div уже показан, он должен исчезать (или, в идеале, исчезать в следующий div).

Я уже создал два метода, но они имеют грязные результаты, особенно при случайном перемещении мыши по ссылкам; слишком много divs появляются, а анимации запускаются до того, как другие закончатся.

Любые идеи о том, как я могу сделать эту работу, будут высоко оценены; так что заменяется на следующий div.

Здесь что-то не удалось:

Версия 1

$(function () {
    $('#one-box').hide();
    $('#two-box').hide();
    $('#three-box').hide();

    // Box one
    $('#one-link').hover(function () {
        $('#two-box').fadeOut(300);
        $('#three-box').fadeOut(300);
        $('#one-box').delay(400).fadeIn(300);
    });
    // Box two
    $('#two-link').hover(function () {
        $('#one-box').fadeOut(300);
        $('#three-box').fadeOut(300);
        $('#two-box').delay(400).fadeIn(300);
    });
    // Box three
    $('#three-link').hover(function () {
        $('#one-box').fadeOut(300);
        $('#two-box').fadeOut(300);
        $('#three-box').delay(400).fadeIn(300);
    });
});

Версия 2

$(function () {

    $('#one-box').hide();
    $('#two-box').hide();
    $('#three-box').hide();

    // Box one
    $('#one-link').hover(function () {
        $('#two-box').animate({
            opacity: 'toggle',
            height: 'toggle'
        }, 'slow', function () {
            $('#three-box').animate({
                opacity: 'toggle',
                height: 'toggle'
            }, 'slow', function () {
                $('#one-box').animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 'slow');
            });
        });
    });

    // Box two
    $('#two-link').hover(function () {
        $('#one-box').animate({
            opacity: 'toggle',
            height: 'toggle'
        }, 'slow', function () {
            $('#three-box').animate({
                opacity: 'toggle',
                height: 'toggle'
            }, 'slow', function () {
                $('#two-box').animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 'slow');
            });
        });
    });

    // Box three
    $('#three-link').hover(function () {
        $('#one-box').animate({
            opacity: 'toggle',
            height: 'toggle'
        }, 'slow', function () {
            $('two-box').animate({
                opacity: 'toggle',
                height: 'toggle'
            }, 'slow', function () {
                $('#three-box').animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, 'slow');
            });
        });
    });

});