Jquery 滑入滑出效果實(shí)現(xiàn)代碼
更新時(shí)間：2010年03月27日 00:50:11 作者：
Jquery 滑入滑出效果實(shí)現(xiàn)代碼，需要的朋友可以參考下。
CSS
<style type="text/css">
#divD{
width:300px;
height:100px;
background-color:#CC99FF;
}
</style>
Jquery代碼
<script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnFadein").bind("click",Fadein); //為btnFadein綁定click時(shí)間
$("#btnFadeout").bind("click",Fadeout); //為btnFadeout綁定click時(shí)間
})
function Fadein(){
$("#divD").slideDown("slow"); //滑入
}
function Fadeout(){
$("#divD").slideUp("slow"); //滑出
}
</script>
HTML
<body>
<input type="button" value="滑入" id="btnFadein" />
<input type="button" value="滑出" id="btnFadeout"/>
<div id="divD">這是div</div>
DIV
</body>
O(∩_∩)O每天進(jìn)步一點(diǎn)點(diǎn)O(∩_∩)O 該BLOG供個(gè)人記錄學(xué)習(xí)筆記，如有錯(cuò)誤歡迎指出！
復(fù)制代碼 代碼如下:
<style type="text/css">
#divD{
width:300px;
height:100px;
background-color:#CC99FF;
}
</style>
Jquery代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnFadein").bind("click",Fadein); //為btnFadein綁定click時(shí)間
$("#btnFadeout").bind("click",Fadeout); //為btnFadeout綁定click時(shí)間
})
function Fadein(){
$("#divD").slideDown("slow"); //滑入
}
function Fadeout(){
$("#divD").slideUp("slow"); //滑出
}
</script>
HTML
復(fù)制代碼 代碼如下:
<body>
<input type="button" value="滑入" id="btnFadein" />
<input type="button" value="滑出" id="btnFadeout"/>
<div id="divD">這是div</div>
DIV
</body>
O(∩_∩)O每天進(jìn)步一點(diǎn)點(diǎn)O(∩_∩)O 該BLOG供個(gè)人記錄學(xué)習(xí)筆記，如有錯(cuò)誤歡迎指出！
相關(guān)文章
這篇文章主要介紹了jquery 撲捉回車鍵事件的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
在使用jQuery開發(fā)的時(shí)候，可能還會(huì)使用到其他的JS庫，比如Prototype，但多庫共存時(shí)可能會(huì)發(fā)生沖突，下面這篇文章主要給大家介紹了關(guān)于jQuery庫沖突的完美解決辦法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
jquery中jquery.offset().top/left用于獲取div距離窗口的距離而jquery.position().top/left用于獲取距離父級(jí)div的距離，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
jquery實(shí)現(xiàn)輸入框動(dòng)態(tài)增減的實(shí)例代碼
主要功能是動(dòng)態(tài)增減輸入框，而且支持對(duì)各個(gè)輸入框的檢測(cè)，每個(gè)輸入框在輸入內(nèi)容后，對(duì)其進(jìn)行錯(cuò)誤提示2013-07-07
這篇文章主要介紹了JQuery異步提交表單與文件上傳功能,結(jié)合實(shí)例形式分析了jQuery表單提交及文件傳輸操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01
jquery實(shí)現(xiàn)無刷新驗(yàn)證碼的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)無刷新驗(yàn)證碼的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jquery 字符串切割函數(shù)substring的用法說明
本篇文章主要是對(duì)jquery字符串切割函數(shù)substring的用法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要為大家詳細(xì)介紹了jquery圖片放大鏡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05