如 on 元素以动画形式输入，将另一个元素动画化为输出

Question

当一个元素滑入时，我需要另一个元素滑出。目前，我已将其设置为淡出。这是我到目前为止的代码：

$('#contact').click(function () {
    $('#contact-info').animate({
        width: 'toggle'
    });
    $('#work-menu').fadeOut('100');
});
$('#menu').click(function () {
    $('#work-menu').animate({
        width: 'toggle'
    });
    $('#contact-info').fadeOut('100');
});

演示

如何更改此代码以使相反的元素在另一个元素滑入视图时向后滑动？

Answer 1

使用'hide'

$('#contact').click(function () {
    $('#contact-info').animate({
        width: 'toggle'
    });
    $('#work-menu').animate({
        width: 'hide'
    });
});
$('#menu').click(function () {
    $('#work-menu').animate({
        width: 'toggle'
    });
    $('#contact-info').animate({
        width: 'hide'
    });
});

演示

Answer 2

通过检查它是否:visible，您可以这样做：

$('#contact').click(function () {
    $('#contact-info').animate({
        width: 'toggle'
    });
    if ($("#work-menu").is(":visible"))
        $('#work-menu').animate({
            width: 'toggle'
        });
});
$('#menu').click(function () {
    $('#work-menu').animate({
        width: 'toggle'
    });
    if ($("#contact-info").is(":visible"))
        $('#contact-info').animate({
            width: 'toggle'
        });
});

演示小提琴