Внутри главной обертки у меня есть 5 Divs. Самый первый div содержит 4 Box (box_1, box_2, box_3, box_4), где произойдет мое событие click.
Другие 4 divs внутри основной оболочки - это содержимое box_1, box_2, box_3, box_4 с уважением. Все поля содержат гиперссылку с уникальным идентификатором для возврата к первому div.
В первый раз, когда я нажимаю на любое меню, появляется контейнер контейнера.
например, нажал на redbox> Переместился в содержимое Box-1> Нажмите "Назад" в меню> Переместиться в раздел "4 цвета".
Снова щелкнула на коробке. Допустим, зеленый ящик> Переместился в контейнер Box2> Нажата на Назад в Меню> Ой! Моя 4-красная ящик с квадратным ящиком выскользнула из моего экрана.
Вот JS Fiddle LINK. Я хочу, чтобы 4-цветная секция div оставалась на экране.
http://jsfiddle.net/swapnaranjita_nayak/8XcZX/
## HTML ##
<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
<div class="wrapper">
<div class="row">
<div class="box1" id="box_1"></div>
<div class="box2" id="box_2"></div> <div class="clear"></div>
</div>
<div class="row">
<div class="box3" id="box_3"></div>
<div class="box4" id="box_4"></div> <div class="clear"></div>
</div>
</div>
</div><!---End of Container fluid--->
<div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
<h1>Box1 Content</h1>
<a href="#" id="back1">Back to #Menu</a>
</div>
<div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
<h1>Box2 Content</h1>
<a href="#" id="back2">Back to #Menu</a>
</div>
<div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
<h1>Box3 Content</h1>
<a href="#" id="back3">Back to #Menu</a>
</div>
<div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
<h1>Box4 Content</h1>
<a href="#" id="back4">Back to #Menu</a>
</div>
</div>
.container_fluid {
width:100%;
}
.wrapper {
width:1208px;
margin:auto;
}
.row {
padding:3% 3% 3% 3%;
}
.box1 {
height:100px;
width:100px;
background-color:red;
margin-right:2%;
float:left;
}
.box2 {
height:100px;
width:100px;
background-color:green;
margin-right:2%;
float:left;
}
.clear {
clear:both;
}
.box3 {
height:100px;
width:100px;
background-color:black;
margin-right:2%;
float:left;
}
.box4 {
height:100px;
width:100px;
background-color:brown;
margin-right:2%;
float:left;
}
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"+=150%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});
"marginRight":"+=170%"
каждый раз, когда вы добавляете 170% или:
"marginLeft":"-=150%"
уменьшите на 150%, это нужно установить, а не увеличивать или уменьшать значение.
http://jsfiddle.net/prollygeek/8XcZX/1/
$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});
}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {
$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"0%"
},
{
duration: 500,
step: function() {
},
complete: function() {
console.log("finished");
}
});
}
});
});
});