侧面元素动画切换

Question

我该怎么做，如果有人点击右边的矩形，那么这个矩形就会变长，例如400 px 如果你再次点击它，矩形会再次变小

  <div class="nebenmenu"><i class="fa fa-css3"></i>
  </div>

jQuery 鳕鱼

$(document).ready(function(){
   $(".nebenmenu").click(function(){
      $(this).animate({width:"200px"} ,500)
   }, function(){
      $(this).animate({width:"55px"} ,500)

   })
})

Answer 1

如果在数据属性中切换，您可以存储信息，某事。喜欢：

    $(document).ready(function(){
       $(".nebenmenu").click(function(){ 
          var toggle = $(this).attr('data-toggle');
          if(!toggle){ console.log("toggle")
             $(this).animate({width:"200px"} ,500);
             $(this).attr("data-toggle",true)
          }else { console.log("nottoggle")
             $(this).animate({width:"55px"} ,500);
             $(this).removeAttr("data-toggle")
          }
       })
    })

.nebenmenu {
width:55px;
height:55px;
border:1px solid black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nebenmenu" ><i class="fa fa-css3"></i>
    </div>

侧面元素动画切换

side element animat toggle

jquery

toggle

slidetoggle