0

我正在编写一个设计,当您单击左侧菜单中的一个选项(#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') 
});
4

1 回答 1

0

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

$('#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");
    }
});

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

于 2013-04-05T20:11:50.840 回答