【JS动态效果】如何jquery实现div右侧滑入滑出的效果

二话不多说，先看效果哈，这样才能吸引你那双有故事的双眸：

下面就针对这个效果我们做一个核心技术的介绍：
首先我们用到的核心知识点为：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来共同作用达到这个效果，其中隐藏和对应的展示函数如下所示：

//隐藏div
function hideLayerSide() {
$(".box").animate({}, 500, function () {
//第一个花括号里面是动画内容，可以为空，但不能省去中括号
$(".box").css({ "right": "-250px", "width": "250px", "height": "auto" }); //在回调函数里面改变css属性来实现transform中的动画变换
})
}
//展示div
function showLayerSide() {
$(".box").animate({}, 500, function () {
//第一个花括号里面是动画内容，可以为空，但不能省去中括号
$(".box").css({ "right": "0px", "width": "250px", "height": "auto" }); //在回调函数里面改变css属性来实现transform中的动画变换
})
}
核心代码已说明，希望对各位有一些帮助，哪怕是一点点，喜欢我的文章的话烦请给个小心心和关注。