【JS】使用jQuery制作图片手风琴效果

效果图 - 图片为动图

鼠标划过时，图片显示，其他图片变小，鼠标移出时，所有图片均匀显示

HTML

div id="box">
        ul>
            li>/li>
            li>/li>
            li>/li>
            li>/li>
            li>/li>
        /ul>
    /div>

CSS

style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 1300px;
        }

        #box {
            width: 1200px;
            height: 350px;
            border: 2px solid red;
            margin: 100px auto;
        }

        #box li {
            width: 240px;
            height: 350px;
            
            float: left;
        }
    /style>

JS

一定要引入 jQuery 文件，可前往 jQuery 官网下载：jQuery 官网

script src="../js/jquery-2.2.4.js">/script>

自己书写的 JS

    $('li').each(function (k, v) {
    
        $(v).css('background', 'url(../images/' + (k + 1) + '.jpeg)');
    })
    
    $('ul li').mouseover(function () {
        
        $(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 })
    })
    
    $('ul').mouseout(function(){
        $("ul li").stop().animate({width:240});
    })