Wie ein Element animiert, animiere einen anderen aus

Question

Wenn ein Element hineingleitet, muss ich das andere Element herausschieben. Im Moment habe ich es auf fadeOut eingestellt. Dies ist der Code, den ich bisher habe:

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

Wie kann ich diesen Code ändern sich die gegenüberliegenden Elemente nach hinten schieben wie die andere gleitet in den Blick zu machen?

Answer 1

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

Durch die Überprüfung, ob seine :visible Sie auf diese Weise tun können:

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