У меня есть страница, состоящая из двух слоев: "layer1" - это меню, и у него есть z-index: 1; "layer2" заполнен содержимым и имеет z-индекс: 2.
Я пытаюсь сделать это так: когда вы нажмете на стрелку pic, "layer2" движется вправо (например, 200 пикселей) за экраном. Я не знаю, правильный ли код в этой ситуации, но это то, что я использую:
$('#arrow').click(function() {
$(this).animate({
marginRight: '+=200'
}, 500);
$('#layer2').animate({
marginLeft: '+=200'
}, 500)});
Как я могу сделать "layer2" назад, когда вы нажимаете стрелку второй раз?
следить за состоянием, это можно кодировать лучше, но это основная идея.
$('#arrow').click(function() {
var elem = $(this);
var state = elem.data("state") || "closed";
var dir = (state === "open") ? "-" : "+";
elem.data("state", state === "open" ? "closed" : "open");
elem.animate({
marginRight: dir + '=200'
}, 500);
$('#layer2').animate({
marginLeft: dir + '=200'
}, 500);
});
z-index
.