Исследование Animate () в Jquery.

0

Внутри главной обертки у меня есть 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>

CSS

.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;
}

JS

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

1 ответ

2
Лучший ответ
 "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");
                            }
                         });
            }
         });
    });
});
  • 0
    Спасибо PollyGeek :))))
  • 0
    @ Свапна добро пожаловать :)
Показать ещё 28 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню