Question

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

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

如何在点击链接时从左到右动画div？

3 个答案: