Question

I have a horizontal accordion menu that I made. Everything works perfectly, however when clicking on a tab, the very far right part of the accordion menu seems to bounce alittle bit. Below I put the jquery code as well as html/css. I could not get it to run through the app so I simply took a Gyazo GIF of what is occuring.

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

Tabs are bouncing while animating accordion menu

1 个答案: