jQuery動(dòng)畫效果-slideUp slideDown上下滑動(dòng)示例代碼

更新時(shí)間：2013年08月28日 18:11:28 作者：

jQuery動(dòng)畫上下滑動(dòng)效果在網(wǎng)頁(yè)中的應(yīng)用還是比較廣泛的，其實(shí)很簡(jiǎn)單通過slideUp slideDown方法便可輕松實(shí)現(xiàn)，具體如下，喜歡的朋友可以參考下，希望對(duì)大家學(xué)習(xí)jquery有所幫助

復(fù)制代碼代碼如下:

 
[code] 
<html> 
<head> 
<meta charset="utf-8"/> 
<style> 
*{ margin:0; padding:0;} 
body{font-size:15px;} 
#container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} 
.head{ background:#999; padding:5px; cursor:pointer;} 
.content{ text-indent:15px;} 
</style> 
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> 
<script> 
$(function(){ 
$("h5.head").hover(function(){ 
$("div.content").slideUp(3000); 
},function(){ 
$("div.content").slideDown(3000); 
}); 
}) 
</script> 
</head> 
<body> 
<div id="container"> 
<h5 class="head">什么是jQuery?</h5> 
<div class="content"> 
JQuery是繼prototype原型之后又一個(gè)javascript庫(kù)，他憑借簡(jiǎn)單的代碼和完善的瀏覽器兼容性，再加上強(qiáng)大的DOM操作，完善的事件處理機(jī)制，強(qiáng)大的ajax操作，加大的簡(jiǎn)化了javascript開發(fā)人員的工作。 
</div> 
</div> 
</body> 
</html> 

[/code]

您可能感興趣的文章:

相關(guān)文章

jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)...
2007-06-06
jQuery判斷元素是否顯示是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jQuery的Read()方法代替原生JS詳解
眾所周知在jQuery中ready方法在DOM完全下載后立即執(zhí)行其中的代碼。因?yàn)樗堑人械腄OM元素都加載完畢，才執(zhí)行給定的函數(shù)，所以你能確定那些試圖操作和訪問元素節(jié)點(diǎn)的方法都能被執(zhí)行。而這篇文章給大家介紹的是如何用jQuery的Read()方法代替原生JS，下面來一起看看。
2016-11-11
jQuery?基礎(chǔ)選擇器與屬性選擇器
這篇文章主要介紹了jQuery?基礎(chǔ)選擇器與屬性選擇器，選擇所有元素,此選擇器使用要慎重，其速度是極其慢的，詳細(xì)介紹內(nèi)容需要的小伙伴可以參考一下下面文章內(nèi)容
2022-08-08
jQuery Ajax中的事件詳細(xì)介紹
這篇文章主要介紹了jQuery Ajax中的事件詳細(xì)介紹,本文詳細(xì)的講解了AJAX的局部事件和全局事件、事件的順序等內(nèi)容,需要的朋友可以參考下
2015-04-04
基于jQuery實(shí)現(xiàn)仿51job城市選擇功能實(shí)例代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿51job城市選擇功能實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jQuery操作input type=radio的實(shí)現(xiàn)代碼
jQuery操作input type=radio的實(shí)現(xiàn)代碼，需要的朋友可以參考下
2012-06-06
jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)硪黄猨Query中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
利用jquery的獲取JS文件中的字符串內(nèi)容
利用jquery的獲取JS文件中的字符串內(nèi)容的代碼，需要的朋友可以參考下
2012-02-02
jQuery分別獲取選中的復(fù)選框值的示例
這篇文章主要介紹了jQuery如何分別獲取選中的復(fù)選框值,需要的朋友可以參考下
2014-06-06