jquery - 如何在单击链接时从左到右为 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>