用多个按钮控制滑动div
我正在制作一个全屏幕div和溢出隐藏的页面。屏幕的左、下、右各有3个div，并有相应的按钮使这些div滑到页面上(使用边距设置将它们上下移动)。
我使用了非常简单的代码，但是需要更高级的代码来记住页面处于什么状态，所以相同的按钮不会再次移动div，或者当另一个按钮被按下时，每个div被推回原来的位置。
我的想法是
设置初始页面=1
如果页面=1(没有按下按钮，没有显示div)
按钮1将div1动画显示在页面上，设置分页=2
按钮2将div2动画放到页面上，设置分页=3
按钮3将div3动画显示在页面上，设置分页=4
否则，如果分页=2(按钮1按下并显示div 1)
按钮1 onlcick什么也不做
按钮2将div2动画到页面，动画div1离开页面，设置页面=3
按钮3将div3动画到页面，动画div1离开页面，设置页面=4
等。
我正在使用下面的代码，如果有人能帮助我按照我想象的方式工作，我会很感激的。
工作代码：
$('#button1').click(function() {
$('#div1').animate({
'marginLeft' : "+=100%"
});
});我想这是怎么回事：
$(Document).ready(函数(){)
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.这似乎不起作用，我相信有一个更优雅和更有效的方法来实现这一点，所以如果任何人可以帮助，我将非常感激。
回答 1
Stack Overflow用户
发布于 2014-11-28 00:44:07
演示：/k4qyoufo/
这是几种方法之一，希望是有用的(大概就是你要找的！)
首先定义一个“状态”数组--在本例中，我显式地使用了边距值作为状态，但同样可以将其设置为0和1s，或者相应地修改逻辑。这些设置为每个div设置状态，而不是为每个场景设置一个状态(在本例中，这意味着3个不同的状态值与8个不同的状态值相反，如果每个可见div组合都有一个！)
var states = [-100, 100, 100];然后，为每个按钮定义一个函数，根据需要修改状态数组(将此div的值设置为切换，其他值设置为关闭屏幕)，然后调用update函数：
$('#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] + "%"
});
}https://stackoverflow.com/questions/27180216
复制相似问题
腾讯云开发者
