简单css布局

body {
       margin: 0 auto;    padding: 0 auto;}.showpannal {
       position:absolute;    left: 200px;    top:300px;}.pannal_left {
       width: 200px;    height: 670px;    background-color: #6CF;    float: left;}.pannal_right {
       height: 670px;    margin-left: 200px;    background-color: #CFF}

jquery自定义函数

shrink = function () {        var show = '
     
     
 ';        return ep = {            init: function (obj) {                ep.create(obj);                ep.bindEvent(obj);            },            create: function (obj) {                obj.append(show);				obj.find("span").addClass("showpannal");            },            bindEvent: function (obj) {                obj.toggle(function () {                    $("#pannal_left").animate({ width: "0px" });                    $("#pannal_right").animate({ marginLeft: "0px" });                    obj.find("span").animate({ left: "0px" });                }, function () {                    $("#pannal_left").animate({ width: "200px" });                    $("#pannal_right").animate({ marginLeft: "200px" });                    obj.find("span").animate({ left: "200px" });                });            }        };    }	    $.fn.bindanimate = function () {		var me=new shrink();        return this.each(function () {            me.init($(this));        });    }

　

调用事例

　　

 展示效果