jQuery实现点击控制左右两边元素挤压显示效果

该功能实现的是：分左、右两边布局，左边div默认展开，左边div中有一个元素，点击实现左边div隐藏，右边div挤压过来；再点击实现左边显示，右边挤过去。

一、HTML代码：

<div class="cont-container">
    <!-- 左侧div  -->
    <div class="cont-wrap-left" id="contWrapLeft">
        <a href="javascript:;" class="cont-wrap-switch" id="J_contWrapSwitch">
            <span></span>
        </a>
    </div>

    <!-- 右侧div  -->
    <div class="cont-wrap">
    </div>
</div>

二、CSS代码：

/* 整个div样式 */
.cont-container {
    position: relative;
    overflow: hidden;
}

/* 左侧div样式 */
.cont-wrap-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 249px;
    height: 100%;
    border-right: 1px solid #E6E6E6;
    z-index: 9;
}

.cont-wrap-switch {
    display: block;
    position: absolute;
    top: 0;
    right:0;
    width: 18px;
    height: 35px;
    line-height: 35px;
    border-left: 1px solid #E6E6E6;
    background: #E6E9ED;
    z-index: 9;
}

.cont-wrap-switch sapn {
    display: inline-block;
    width: 18px;
    height: 24px;
    vertical-align: middle;
    background: url(../images/switch_btn.png) no-repeat -1px -24px;
}

.cont-wrap-switch:hover {
    background: #DEE0E4;
}

.cont-wrap-switch:hover sapn {
    background: -1px -0;
}

.cont-wrap-switch.off {
    right: -18px;
    background: #232C48;
}

.cont-wrap-switch.off span {
    background: url(../images/switch_btn.png) no-repeat -1px -72px;
}

.cont-wrap-switch.off:hover {
    background: #1F2740;
}

.cont-wrap-switch.off:hover sapn {
    background-position: -1px -48px;
}

三、JS代码：

<script type="text/javascript">
    $("#J_contWrapSwitch").click(function(){
        if($(this).hasClass("off")) {
            $("#contWrapLeft").animate({ left: "0"});
            $(".cont-wrap").animate({marginLeft: "250px"}, 300);
            $(this).removeClass("off");
        } else {
            $("#contWrapLeft").animate({ left: "-255px"});
            $(".cont-wrap").animate({marginLeft: "0"}, 300);
            $(this).addClass("off");
        }
    });
</script>