【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中的动画变换
    })
}

核心代码已说明，希望对各位有一些帮助，哪怕是一点点，喜欢我的文章的话烦请给个小心心和关注。
有需要完整代码的可以留言，有球必应！
记得，要做最后出牌的人，出让别人觉得出其不意的牌，在他们以为你要输掉的时候，这样，你才能赢得牌局。