如何在单击链接时从左到右为 div 设置动画？

Question

我有 4 个 div，我想一次只显示一个 div，因为我正在使用以下代码。现在它工作正常我想向我的 div 添加动画。 单击任何链接时，div 应该从左向右移动。 这是我的工作link

应该是slide like

这是我的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;

}

Answer 1

<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>

Answer 2

到目前为止，无论单击哪个链接，您都处于灰色活动状态，并且正在删除 post_active_link 类并将其添加到下一个链接。

您想要做的是将其永久放置，然后对其进行动画处理，而不是删除并添加到下一次点击。你可以通过动画它的左边距来做到这一点，这样它就会移动到相关的地方。所以点击你会做类似的事情：

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

50px 是点击链接变灰之前的相关距离。

Answer 3

正如我所承诺的，我已经重构并将动画添加到您的代码中：

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

并为您的 div 添加了一个包装器，以便包含和定位它们。 Fiddle