Như trên các phần tử hoạt hình trong, hãy tạo hiệu ứng khác ra

Question

Khi một phần tử được trượt vào, tôi cần phần tử khác để trượt ra ngoài. Tại thời điểm này tôi đã đặt nó thành fadeOut. Đây là mã tôi có cho đến nay:

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

Làm thế nào tôi có thể thay đổi mã này để làm cho các yếu tố ngược lại trượt trở lại như một trong những khác hiện để xem?

Answer 1

sử dụng '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

Bằng cách kiểm tra nếu nó :visible bạn có thể làm theo cách này:

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