jquery - 我如何制作一个单击时来回滑动？

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

但是，您在行尾错过了一些分号