Question

当我点击左侧菜单中的一个选项（＃menu1contact）时，我正在编写一个设计，其中面具的右侧（＃face2）从左向右滑动并再次向后滑动，显示内部内容（＃内容）。

这是我的代码：

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

但是你在行的末尾错过了一些分号

如何在点击时来回制作<div>幻灯片？</div>

1 个答案: