jquery手风琴效果

文中用到的图片是500*300的尺寸
记得引入jquery的js文件

CSS部分

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#box {
    width: 1200px;
    height: 300px;
    background-color: red;
    margin: 100px auto;
    overflow: hidden;
}

#box .list {
    width: 1300px;
    overflow: hidden;
}

#box .list li {
    float: left;
    width: 200px;
    height: 300px;
}

HTML部分

<div id="box">
    <ul class="list">
        <li><img src="img/01.jpg" alt=""></li>
        <li><img src="img/02.jpg" alt=""></li>
        <li><img src="img/03.jpg" alt=""></li>
        <li><img src="img/04.jpg" alt=""></li>
        <li><img src="img/05.jpg" alt=""></li>
        <li><img src="img/06.jpg" alt=""></li>
    </ul>
</div>

JS部分

//页面加载
$(function(){
    //鼠标移入事件
    $(".list>li").mouseenter(function(){
        $(this).stop().animate({"width":"500px"}).stop().siblings({"width":"143px"});
    }).mouseleave(function(){ //鼠标移出事件
        $(this).stop().animate({"width":"200px"}).stop().siblings({"width":"200px"});
    })
})

手风琴效果图
手风琴效果图