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)文章
本文主要對(duì)jQuery中的DOM操作進(jìn)行了詳細(xì)全面的介紹。文中舉了簡單例子，便于理解與學(xué)習(xí)，對(duì)初學(xué)者具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
淺析jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別
本篇文章主要是對(duì)jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
jQuery獲得包含margin的outerWidth和outerHeight的方法
這篇文章主要介紹了jQuery獲得包含margin的outerWidth和outerHeight的方法,涉及jQuery中outerWidth及outerHeight方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)的簡單折疊菜單(折疊面板)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單折疊菜單(折疊面板)效果代碼,涉及jQuery中slideToggle與toggleClass方法的靈活使用技巧,需要的朋友可以參考下2015-09-09
jquery ajax 同步異步的執(zhí)行示例代碼，需要的朋友可以參考下。2010-06-06
以前針對(duì)DOM元素的插件(即$.fn.)存臨時(shí)數(shù)據(jù)都加在當(dāng)前元素上建個(gè)特殊的屬性來存,(JQ內(nèi)部直接也搞這樣的)2010-08-08
Jquery 模板數(shù)據(jù)綁定插件的使用方法詳解
本篇文章是對(duì)在Jquery中模板數(shù)據(jù)綁定插件的使用方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
jQuery實(shí)現(xiàn)的網(wǎng)頁右下角tab樣式在線客服效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁右下角tab樣式在線客服效果代碼,涉及jQuery簡單樣式變換控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
本篇文章是對(duì)JQuery-tableDnD拖拽的基本使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
基于jQuery實(shí)現(xiàn)點(diǎn)擊最后一行實(shí)現(xiàn)行自增效果的表格
現(xiàn)在任何事務(wù)都追求效率和人性化，當(dāng)然網(wǎng)頁效果也是如此，如果一個(gè)可以編輯數(shù)據(jù)的表格，編輯到最后一行的時(shí)候，點(diǎn)擊可以自動(dòng)添加一行，這樣算是一個(gè)比較人性化的效果，可以免去一絲勞頓之苦，下面分享一段這樣的代碼2016-01-01