如何在单击时使<div>幻灯片来回滑动？

Question

我正在写一个设计，当你点击左侧菜单中的一个选项(#menu1contact)时，遮罩的右侧(#face2)会从左向右滑动，然后再滑回来，从而显示出内部内容(# content )。

下面是我的代码：

$('#menu1contact').on('click', function(){

    $('#face2').animate({
    'marginLeft': '+=750px'
    },2500)
    $('#content').animate({
    'width': '+=750px'
    },2500)
    $('#content').css('border-left' , 'solid #5d3f35') 
});

但是，当您再次单击#menu1contact时，我如何让它滑回原来的位置？

以下代码不起作用：

$('#menu1contact').toggle(function(){

    $('#face2').animate({
    'marginLeft': '+=750px'
    },2500)
    $('#content').animate({
    'width': '+=750px'
    },2500)
    $('#content').css('border-left' , 'solid #5d3f35')}, 

           function(){

    $('#face2').animate({
    'marginLeft': '-=750px'
    },2500)
    $('#content').animate({
    'width': '-=750px'
    },2500)
    $('#content').css('border-left' , 'solid #5d3f35') 
});

Answer 1

您可以添加一个类来检查状态：

$('#menu1contact').on('click', function(){
    if ( !$(this).hasClass("opened") ) {
    $('#face2').animate({
    'marginLeft': '+=750px'
    },2500)
    $('#content').animate({
    'width': '+=750px'
    },2500);
    $('#content').css('border-left' , 'solid #5d3f35'); 
    $(this).addClass("opened");
    } else {
       $('#face2').animate({
    'marginLeft': '-=750px'
    },2500)
    $('#content').animate({
    'width': '-=750px'
    },2500);
    $('#content').css('border-left' , 'solid #5d3f35');
     $(this).removeClass("opened");
    }
});

但是，您在行尾遗漏了一些分号