jQuery動(dòng)畫效果-fadeIn fadeOut淡入淺出示例代碼
更新時(shí)間:2013年08月28日 18:06:44 作者:
jQuery動(dòng)畫效果淡入淺出想必大家都有見到過吧,其實(shí)很很簡(jiǎn)單,通過fadeIn fadeOut方法便可輕松實(shí)現(xiàn),具體如下,喜歡的朋友可以參考下,希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
<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").toggle(function(){
$("div.content").fadeOut(3000);
},function(){
$("div.content").fadeIn(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>
您可能感興趣的文章:
- jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
- jQuery動(dòng)畫特效實(shí)例教程
- JQuery動(dòng)畫animate的stop方法使用詳解
- 利用jquery動(dòng)畫特效和css打造的側(cè)邊彈出垂直導(dǎo)航
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫效果
- jQuery動(dòng)畫效果-slideUp slideDown上下滑動(dòng)示例代碼
- jQuery動(dòng)畫animate方法使用介紹
- JQuery動(dòng)畫和停止動(dòng)畫實(shí)例代碼
- jquery實(shí)現(xiàn)圖片列表鼠標(biāo)移入微動(dòng)
相關(guān)文章
jQuery滾動(dòng)條插件nanoscroller使用指南
本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法,涉及jQuery結(jié)合HTML5實(shí)現(xiàn)瀑布流效果的動(dòng)態(tài)加載功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼
Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼,需要的朋友可以參考下。主要是屬性比較多。2011-08-08jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,結(jié)合實(shí)例形式分析了jQuery鼠標(biāo)事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09讓jQuery與其他JavaScript庫(kù)并存避免沖突的方法
為了解決jQuery和其他JavaScript庫(kù)中$()函數(shù)的沖突,需要取消jQuery的$()函數(shù),下面有個(gè)不錯(cuò)的方法,感興趣的朋友可以參考下2013-12-12