Question

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

$('#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

如何更改此代码以使相对的元素向下滑动，而另一个元素滑入视图？

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

DEMO

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

演示Fiddle

在元素动画中，动画另一个动画

2 个答案: