Question

我正在创建一个全屏div并隐藏溢出的页面。屏幕的左侧，底部和右侧各有3个div，并带有相应的按钮，使这些div滑动到页面上（使用边距设置可以打开和关闭它们）。

我使用非常简单的代码，但需要更高级的代码来记住页面所处的状态，因此相同的按钮不会再次移动div或者每个div都会被推回原来的状态按下另一个按钮时的位置。

我的想法是它可能像

设置初始pagestate = 1

如果pagestate = 1（没有按下按钮，没有显示div）

按钮1 onlcick将div1动画到页面上，设置pagestate = 2
按钮2 onlcick将div2动画到页面上，设置pagestate = 3
按钮3 onlcick将div3动画到页面上，设置pagestate = 4

否则，如果pagestate = 2（按下按钮1并显示div 1）

按钮1 onlcick什么都不做按钮2 onlcick动画div2到页面，动画div1关闭页面，设置pagestate = 3
按钮3 onlcick将div3动画到页面上，动画div1关闭页面，设置pagestate = 4

等。

我正在使用下面的代码，如果有人能帮助我按照我设想的方式工作，我将不胜感激

工作代码：

    $('#button1').click(function() {
      $('#div1').animate({
      'marginLeft' : "+=100%"
       });
     });

我认为这可能有用：

$（document）.ready（function（）{

var state = 1;


$('#button1').click(function() {


    if (state = 1) {    

    $('#div1').animate({
    'marginleft' : "+=100%" 
    });


    state = 2;

    }

    else if (state = 3) {

         $('#div1').animate({
        'marginLeft' : "+=100%" 
         }); 

           $('#div2').animate({
        'marginTop' : "-=100%" 
         });    

      state = 2;

      }

      else if (state = 4) {

         $('#div1').animate({
        'marginLeft' : "+=100%" 
         }); 

           $('#div4').animate({
        'marginRight' : "-=100%" 
         }); 

      state = 2;

       }

continued for each of the other 2 buttons.

这似乎不起作用，我相信有更优雅和有效的方法来实现这一目标，所以如果有人能提供帮助，我会非常感激。

Answer 1

演示：http://jsfiddle.net/CJ_/k4qyoufo/

这是实现它的几种方法之一，希望有用（并且大致是你正在寻找的！）

通过定义'状态'数组开始 - 在这个例子中，我已经明确地使用了边距的值作为状态，但是同样可以设置为0和1或者相应地修改逻辑的东西。这为每个场景设置了每个div的状态而不是1（在这种情况下意味着3个不同的状态值，如果对于每个可见div的组合都有一个，则为8！）

var states = [-100, 100, 100];

然后对于每个按钮，定义一个根据需要修改状态数组的函数（将此div的值设置为toggle，将其他值设置为off屏幕），然后调用更新函数：

$('#but1').click(function() {
    states[0]=(states[0]==0)?-100:0;
    states[1]=100;
    states[2]=100;
    update();
});

$('#but2').click(function() {
    states[0]=-100;
    states[1]=(states[1]==100)?0:100;
    states[2]=100;
    update();
});

$('#but3').click(function() {
    states[0]=-100;
    states[1]=100;
    states[2]=(states[2]==0)?100:0;
    update();
});

然后，此功能会在按下按钮时将适当的边距设置为您想要的值。

function update() {
    $('#div1').animate({
        'marginLeft' : states[0] + "%"
    });
    $('#div2').animate({
        'marginTop' : states[1] + "%"
    });
    $('#div3').animate({
        'marginLeft' : states[2] + "%"
    });
}

使用多个按钮控制滑动div

1 个答案: