Как на элементе анимирует, анимирует другой

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

Demo Fiddle