jQuery動(dòng)畫效果-fadeIn fadeOut淡入淺出示例代碼
更新時(shí)間：2013年08月28日 18:06:44 作者：
jQuery動(dòng)畫效果淡入淺出想必大家都有見到過(guò)吧，其實(shí)很很簡(jiǎn)單，通過(guò)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插件HighCharts繪制2D半圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D半圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制半圓環(huán)圖形的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)?lái)一篇jQuery獲取同級(jí)元素的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
本文給大家整理了9款基于jQuery的圖片滑塊焦點(diǎn)圖插件，效果都非常炫酷，演示和下載地址都給大家整理好了，有需要的小伙伴直接拿走吧，不用跟我客氣^_^2014-12-12
jquery下利用jsonp跨域訪問(wèn)實(shí)現(xiàn)方法
客戶端的跨域訪問(wèn)，可以通過(guò)jsonp方式來(lái)實(shí)現(xiàn)，jquery提供了跨域訪問(wèn)的方法，jQuery.ajax()支持get方式的跨域。當(dāng)然支持跨域還需要服務(wù)器端相應(yīng)的處理。2010-07-07
使用jQuery將多條數(shù)據(jù)插入模態(tài)框的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用jQuery將多條數(shù)據(jù)插入模態(tài)框的方法，很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下2014-10-10
基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作的相關(guān)資料，利用jquery實(shí)現(xiàn)了對(duì)一個(gè)表單字段格式的即時(shí)檢查，感興趣的小伙伴們可以參考一下2016-05-05
jQuery 監(jiān)控鍵盤一段時(shí)間沒(méi)輸入
當(dāng)一個(gè)文本框中，里面的內(nèi)容1秒鐘無(wú)變化，則表示用戶1秒鐘內(nèi)無(wú)輸入，說(shuō)明用戶是已經(jīng)輸入完成，再等待返回?cái)?shù)據(jù)了。那么jQuery如何實(shí)現(xiàn)判斷1秒內(nèi)無(wú)輸入呢，一起通過(guò)本文學(xué)習(xí)吧2016-04-04
jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框,具有智能定位功能,涉及jQuery控制頁(yè)面元素浮動(dòng)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10
jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一
這篇文章主要介紹了jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了jQuery制作拼圖小游戲,思路與源碼都分享給大家，需要的朋友可以參考下2015-01-01