DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery 滑入滑出效果實現代碼
Jquery 滑入滑出效果實現代碼
編輯:JQuery特效代碼     
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時間
$("#btnFadeout").bind("click",Fadeout); //為btnFadeout綁定click時間
})

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每天進步一點點O(∩_∩)O 該BLOG供個人記錄學習筆記,如有錯誤歡迎指出!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved