Как анимировать div слева направо, нажав на ссылку?

Question

Как анимировать div слева направо, нажав на ссылку?

0

У меня есть 4 divs, я хочу показывать только один div за раз, потому что я использую следующий код. Он работает правильно, теперь я хочу добавить анимацию в div. При нажатии на любую ссылку div должен перемещаться слева направо. Это моя рабочая ссылка

Он должен быть скользким, как

Это мой html-код

<div id="div1">
  This is div 1
</div>
<div id="div2">
    This is div 2

</div>
<div id="div3">
   This is div 3
</div>
<div id="div4">
  This is div4
</div>
<div id="post_links"> 
  <span id="show1" class="post_active_link">Div1</span>
 <span id="show2">Div2</span>
 <span id="show3">Div3</span>
 <span id="show4">Div4</span>

</div>

Это код jquery

     $(document).on('click', '#show1', function (event) {
               $('#div1').show();
              $('#div2').hide();
                 $('#div3').hide();
                $('#div4').hide();
 $('#show1').addClass('post_active_link');
 $('#show2').removeClass('post_active_link');
 $('#show3').removeClass('post_active_link');
  $('#show4').removeClass('post_active_link');

           });


            $(document).on('click', '#show2', function (event) {

           $('#div1').hide();
           $('#div2').show();
          $('#div3').hide();
          $('#div4').hide();
      $('#show1').removeClass('post_active_link');
      $('#show2').addClass('post_active_link');
      $('#show3').removeClass('post_active_link');
      $('#show4').removeClass('post_active_link');



         });

          $(document).on('click', '#show3', function (event) {
           $('#div1').hide();
            $('#div2').hide();
            $('#div3').show();
           $('#div4').hide();
    $('#show1').removeClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').addClass('post_active_link');
    $('#show4').removeClass('post_active_link');
             });


           $(document).on('click', '#show4', function (event) {
              $('#div1').hide();
            $('#div2').hide();
              $('#div3').hide();
              $('#div4').show();
      $('#show1').removeClass('post_active_link');
      $('#show2').removeClass('post_active_link');
      $('#show3').removeClass('post_active_link');
      $('#show4').addClass('post_active_link');
           });

Это мой код css

.post_active_link{
    background:#666666;
   }
#div1{
    display:block;
    padding:50px;
    border: 1px solid #666666;
}
#div2,#div3,#div4{
    display:none;
   padding:50px;
    border: 1px solid #666666;
}
#post_links{
    margin-top:10px; 
}
#show1,#show2,#show3,#show4{
    font-weight:bold;
    cursor:pointer;
    padding:10px;

}

xrcwrn 19 сен. 2013, в 12:45

Источник

Теги:

jquery

html

css

jquery-animate

3 ответа

Ещё вопросы

Patsy Issa · Answer 1 · 2013-09-19T11-02-00.000Z

Как и было обещано, я обновил и добавил анимацию в ваш код:

Js

$("#post_links").on('click', 'span', function () {
    var target = "#div" + $(this).data('target');
    console.log("click");
    $(target).show().animate({
        width: 400
    }, 600).siblings().css("width", "0px").hide();
    $(this).addClass('post_active_link').siblings().removeClass('post_active_link');
});

Css

#div2, #div3, #div4 {
    display:none;
    padding:50px;
    border: 1px solid red;
    width:0;
    white-space:nowrap;
}

И добавил обертку к вашим divs, чтобы содержать и настраивать их. скрипка

Спасибо за ответ. Это должно быть (как) [ wowslider.com/jquery-slider-carousel-mac-stack-demo.html]
@ Маниш О, это другая история, вам нужно расположить их абсолютно и скрыть контейнер с переполнением, при нажатии вы перемещаете их влево и вправо.

Quinny · Answer 2 · 2013-09-19T08-34-00.000Z

До сих пор у вас есть активное активное состояние в зависимости от того, какая ссылка была нажата, и удаляет класс post_active_link и добавляет его к следующей ссылке.

То, что вы хотите делать, - это постоянно работать на месте, а затем анимировать его, а не удалять и добавлять к следующему клику. Вы можете сделать это, оживив его маржу слева, чтобы она переместилась в соответствующее место. Таким образом, вы можете сделать что-то вроде:

$(".post_active_link").animate({
    marginLeft: '-=50px'
}, 'slow');

Где 50px - это соответствующее расстояние, пока ссылка, которая была нажата, не седилась.

Ankit Agrawal · Answer 3 · 2013-09-19T07-40-00.000Z

<script>
$(document).on('click', '#show1', function (event) {
    $('#div1').animate({width: 'show'},"slow");
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').hide();
    $('#show1').addClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').removeClass('post_active_link');
    $('#show4').removeClass('post_active_link');
});

$(document).on('click', '#show2', function (event) {
    $('#div1').hide();
    $('#div2').animate({width: 'show'},"slow");
    $('#div3').hide();
    $('#div4').hide();
    $('#show1').removeClass('post_active_link');
    $('#show2').addClass('post_active_link');
    $('#show3').removeClass('post_active_link');
    $('#show4').removeClass('post_active_link');
});

$(document).on('click', '#show3', function (event) {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').animate({width: 'show'},"slow");
    $('#div4').hide();
    $('#show1').removeClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').addClass('post_active_link');
    $('#show4').removeClass('post_active_link');
});


$(document).on('click', '#show4', function (event) {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
    $('#div4').animate({width: 'show'},"slow");
    $('#show1').removeClass('post_active_link');
    $('#show2').removeClass('post_active_link');
    $('#show3').removeClass('post_active_link');
    $('#show4').addClass('post_active_link');
});
</script>

это должно быть показано как показ слайдов изображения