CODEWITHSUNDEEP
jqueryclickjquery-animate
angela
angela

Reputation: 1143

As on element animates in, animate another out

As one element slides in I need the other element to slide out. At the moment I have set it to fadeOut. This is the code I have so far:

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

How can I change this code to make the opposite elements slide back as the other one slides into view?

Upvotes: 5

Views: 152

Answers (2)

Greenhorn
Greenhorn

Reputation: 1700

By checking if its :visible you can do this way:

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

Demo Fiddle

Upvotes: 1

Anton
Anton

Reputation: 32581

use '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

Upvotes: 1

Related Questions