jquery - 就像元素动画一样，动画另一个

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

演示小提琴