Javascript网页手风琴

每日鸡汤： 做一个精彩的自己，跟着自己的直觉走，别怕失去，别怕失败，别怕路远，做了才有对错，经历才有回忆。

    /* --------------------------- html -------------------------------- */
    <div id="igs">
        <div class="ig ig1">
            <div class="txt">
                <p class="p1">作者 ： 默默的墨墨</p>
                <p class="p2">我的个人拉萨之旅｜｜故事之城</p>
            </div>
        </div>
            <div class="ig ig2">
            <div class="txt">
                <p class="p1">作者 ： 默默的墨墨</p>
                <p class="p2">我的个人成都之旅｜｜火锅之城</p>
            </div>
        </div>
            <div class="ig ig3">
            <div class="txt">
                <p class="p1">作者 ： 默默的墨墨</p>
                <p class="p2">我的个人武汉之旅｜｜热干面之城</p>
            </div>
        </div>
            <div class="ig ig4">
            <div class="txt">
                <p class="p1">作者 ： 默默的墨墨</p>
                <p class="p2">我的个人丽江之旅｜｜艳遇之城</p>
            </div>
        </div>
    </div>

    /* --------------------------- css -------------------------------- */
    *{padding:0px;margin:0px;font-family: "寰蒋闆呴粦";}
    #igs{width:1100px; height:429px;}
    .ig{width:100px;height:429px;float:left;}
    .ig4{width:789px;}
    .ig1{background-image:url("../img/1.jpg");}
    .ig2{background-image:url("../img/2.jpg");}
    .ig3{background-image:url("../img/3.jpg");}
    .ig4{background-image:url("../img/4.jpg");}
    .txt{width: 100px;height:429px;background: rgba(0,0,0,0.5);cursor: pointer;}
    .txt p{color:#fff;float:left;margin: 15px;}
    .txt .p1{font-size:14px;width: 14px;}
    .txt .p2{font-size:12px;width: 12px;}

    /* --------------------------- js -------------------------------- */
    //引入JQurey文件
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(function(){
            $(".txt").mouseover(function(){
                $(this).parent().stop(true).animate(
                    {"width":"789px"},500
                ).siblings().stop(true).animate(
                    {"width":"100px"},500
                );
            });
        });
    </script>