在为手风琴菜单制作动画时，标签会弹跳

Question

我有一个水平手风琴菜单。一切都很完美，但是当点击一个标签时，手风琴菜单的最右边部分似乎有点弹跳。下面我把jquery代码和html / css放在一起。我无法让它通过应用程序，所以我只是采取了一个Gyazo GIF的发生了什么。

https://gyazo.com/ddb820e0551c87fa6469a566a1c4fd84?token=275f48ffc92d7fbe036752ddb755feef

<ul id="accordion">
      <li class='tab_1'>

      </li>
      <li class='tab_2'>

      </li>
      <li class='tab_3'>

      </li>
      <li class='tab_4'>

      </li>
  </ul>



<script>$(document).ready(function(){

    activeItem = $("#accordion li:first");
    $(activeItem).addClass('active');

    $("#accordion li").click(function(){
        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
        $(this).animate({width: "1150px"}, {duration:300, queue:false});
        activeItem = this;
    });

});</script>

#accordion {
    list-style: none;
    height: 200px;
    overflow: hidden;
    width:1300;
    position:relative;
    padding-left: 0;
    padding-right:0;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}


.tab_1{
background-image:url('test.png');
}

.tab_2{
background-image:url('tab_3.png');
}

.tab_3{
background-image:url('tab_2.png');
}

.tab_4{
background-image:url('tab_4.png');
}

#accordion li {
float: left;
border-left:;
display: block;
height: 200px;
width: 50px;

overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;

}

#accordion li.active {
width:1150px;
}

Answer 1

你可以使用css动画代替jquery.animation

CSS：

#accordion {
    list-style: none;
    height: 200px;
    overflow: hidden;
    width:1300px;
    padding-left: 0;
    padding-right:0;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.tab_1{
    background-image:url('test.png');
}

.tab_2{
    background-image:url('tab_3.png');
}

.tab_3{
    background-image:url('tab_2.png');
}

.tab_4{
    background-image:url('tab_4.png');
}

#accordion li {
  display: block;
  height: 200px;
  width: 50px;
  transition: width 0.25s linear;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.5em;
  float: left;
}

#accordion li img {
  border: none;
  border-right: 1px solid #fff;
  float: left;

}

#accordion li.active {
  width:1150px;
}

JS：

$(document).ready(function(){

    activeItem = $("#accordion li:first");
    $(activeItem).addClass('active');

    $("#accordion li").click(function(){
        $(activeItem).css({width: "50px"});
        $(this).css({width: "1150px"});
        activeItem = this;
    });
});