Mentre l'elemento si anima, animane un altro

Question

Quando un elemento scorre in avanti, è necessario che l'altro elemento venga rimosso. Al momento l'ho impostato su fadeOut. Questo è il codice che ho finora:

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

Come posso cambiare questo codice per rendere gli elementi opposti scivolare indietro come l'altro scivola in vista?

Answer 1

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

Controllando se :visible si può fare in questo modo:

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