jQuery学习之手风琴效果

js代码：

<script type="text/javascript" src="jquery-3.0.0.js"></script>

<script type="text/javascript">
            $(function() {
                //获取所有li遍历
                $(".li_list").each(function() {
                    //当鼠标进去当前li
                    $(this).mouseenter(function() {
                        //设置当前元素宽度
                        $(this).stop()
                                .animate({ "width": "600px" }, 500, "linear");
                                //设置同胞元素宽度
                                .siblings().stop()
                                           .animate({ "width": "100px" }, 500, "linear");
                    });
                });
            });
        </script>

css代码：

            .li_list {
                width: 100px;
                height: 300px;
                list-style: none;
                float: left;
                overflow: hidden;
            }

            .li_list img {
                width: 100%;
                height: 100%;
            }

            .divbg {
                width: 600px;
                height: 300px;
                background: rgba(230, 0, 0, 0.5);
                text-align: center;
                line-height: 300px;
                float: left;
            }

            .divbg span {
                display: block;
                width: 100px;
                height: 300px;
                float: left;
            }

            .div1 {
                width: 500px;
                height: 300px;
                float: left;
            }
            .mo{
                width: 600px;
            }

html代码：

        <ul class="ul_list">
            <li class="li_list">
                <div class="divbg">
                    <span>萌宠</span>
                    <div class="div1">
                        <img src="img/0.jpg" />
                    </div>
                </div>
            </li>
            <li class="li_list">
                <div class="divbg">
                    <span>萌宠</span>
                    <div class="div1">
                        <img src="img/1.jpg" />
                    </div>
                </div>
            </li>
            <li class="li_list">
                <div class="divbg">
                    <span>萌宠</span>
                    <div class="div1">
                        <img src="img/2.jpg" />
                    </div>
                </div>
            </li>
            <li class="li_list mo">
                <div class="divbg">
                    <span>萌宠</span>
                    <div class="div1">
                        <img src="img/3.jpg" />
                    </div>
                </div>
            </li>
        </ul>