二話不多說，先看效果哈，這樣才能吸引你那雙有故事的雙眸：
下面就針對這個效果我們做一個核心技術的介紹：
首先我們用到的核心知識點為：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中的動畫變換
})
}
核心代碼已說明，希望對各位有一些幫助，哪怕是一點點，喜歡我的文章的話煩請給個小心心和關注。