就像元素动画一样，动画另一个答案

【问题标题】：As on element animates in, animate another out就像元素动画一样，动画另一个
【发布时间】：2013-10-02 11:47:30
【问题描述】：

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

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

DEMO

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

【问题讨论】：

标签： jquery click jquery-animate

【解决方案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'
    });
});

DEMO

【讨论】：

感谢您的帮助 x

【解决方案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'
        });
});

演示Fiddle

【讨论】：