二话不多说，先看效果哈，这样才能吸引你那双有故事的双眸：
下面就针对这个效果我们做一个核心技术的介绍：
首先我们用到的核心知识点为：jquery的animate函数，其中滑出来和滑进去的缓慢效果是利用CSS3里面的transition属性。另外还有关于点击非div地方隐藏该div的效果主要是click事件触发隐藏效果。
说再多还不如贴代码来解释来的实际：
html:
<div class="box"><div class="boxhead"><h3>对象选择</h3><div class="boxsearch"><input type="text" id="searchNameOrIp" placeholder="输入IP或名称"><img width="25px" onclick="searchSysData()" src="img/dbsearch.png" alt=""></div></div><div class="boxmain"></div><div class="caremsg"><span>关闭</span></div></div>
其中主要利用css进行样式设置,我这边用的是相对布局的方式，设置父div为溢出隐藏，否则的话那个隐藏起来的div会自动跑到边框外面，核心css如下：
.allbox{width: 800px;height: 800px;margin: 30px auto;position: relative;overflow: hidden;border: 1px solid #eee;}.box{width: 250px;height: auto;position: absolute;right: -250px;transition:all 1s;background-color: #EFF1F8;}
js主要利用按钮点击触发隐藏和展示效果，其中css不难发现right设置为-250px,我们利用设置css样式的相对右边距离和transition来共同作用达到这个效果，其中隐藏和对应的展示函数如下所示：
//隐藏divfunction hideLayerSide() {$(".box").animate({}, 500, function () {//第一个花括号里面是动画内容，可以为空，但不能省去中括号$(".box").css({"right": "-250px", "width": "250px", "height": "auto" }); //在回调函数里面改变css属性来实现transform中的动画变换})}//展示divfunction showLayerSide() {$(".box").animate({}, 500, function () {//第一个花括号里面是动画内容，可以为空，但不能省去中括号$(".box").css({"right": "0px", "width": "250px", "height": "auto" });//在回调函数里面改变css属性来实现transform中的动画变换})}
核心代码已说明，希望对各位有一些帮助，哪怕是一点点，喜欢我的文章的话烦请给个小心心和关注。
有需要完整代码的可以留言，有球必应！
记得，要做最后出牌的人，出让别人觉得出其不意的牌，在他们以为你要输掉的时候，这样，你才能赢得牌局。
