jQuery实现手风琴效果动画

知识点：css浮动定位，css3 nth-child()选择器，jQuery animate()动画函数，jQuery stop()函数

效果图：

代码：

html代码：

  <div class="img_show">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

css代码

/* init */
*{
  margin:0;
  padding:0;
}
ul{
  list-style-type: none;
}
/* show */

div.img_show{
  width:1000px;
  height:300px;
}
div.img_show ul li{
  width:100px;
  height:300px;
  background-repeat: no-repeat;
  background-size:100% 100%;
  float:left;
}
div.img_show ul li:nth-child(1){
  background-image: url(../img/1.jpg);
}
div.img_show ul li:nth-child(2){
  background-image: url(../img/2.jpg);
}
div.img_show ul li:nth-child(3){
  background-image: url(../img/3.jpg);
}
div.img_show ul li:nth-child(4){
  background-image: url(../img/4.jpg);
}
div.img_show ul li:nth-child(5){
  background-image: url(../img/5.jpg);
  width:400px;
}

javascript代码

$(function(){
  $('div.img_show ul li').mouseover(function(){
    $(this).stop(true).animate({
      width:'400px'
    },2000).siblings().stop(true)
    .animate({
      width:'100px'
    },2000)
  })
})

声明：图片资源均来自互联网，如有侵权，请联系作者删除

转载说明：转载时，请注明出处，谢谢

jQuery库下载地址：https://www.bootcdn.cn/