快捷導(dǎo)航

jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法

更新時(shí)間：2015年03月27日 12:33:55 作者：上大王

這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法。分享給大家供大家參考。具體分析如下：

下面的JS代碼演示了jQuery控制色塊元素逐漸隱藏的效果，可以控制隱藏速度

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
 });
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;">
</div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;">
</div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;">
</div>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery源碼分析之Event事件分析
對(duì)于javascript事件擴(kuò)展，所有的lib都差不多。和jquery和prototype,yui和Ext，其要解決的首要問題是兼容性，所有 lib都會(huì)對(duì)event進(jìn)行包裹，統(tǒng)一其屬性解決其兼容性。
2010-06-06
關(guān)于jQuery里prev()的簡單操作代碼
這篇文章主要介紹了jQuery里prev()的簡單操作代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-10-10
jquery清空input標(biāo)簽的值及清除標(biāo)簽里面的內(nèi)容
這篇文章主要介紹了jquery清空input標(biāo)簽的值,清除標(biāo)簽里面的內(nèi)容,清除input標(biāo)簽的值,可以通過直接將input標(biāo)簽的值設(shè)置為空來實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10
jQuery操作元素節(jié)點(diǎn)
這篇文章介紹了jQuery操作元素節(jié)點(diǎn)的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
Jquery實(shí)現(xiàn)異步上傳文件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)異步上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
jQuery中用dom操作替代正則表達(dá)式
這篇文章主要介紹了jQuery中用dom操作替代正則表達(dá)式的方法,需要的朋友可以參考下
2014-12-12
jQuery 隔行換色支持鍵盤上下鍵，按Enter選定值
jQuery 隔行換色支持鍵盤上下鍵，按Enter選定值
2009-08-08
jQuery雙向列表選擇器DIV模擬版
前段時(shí)間項(xiàng)目需要用到雙向列表選擇，想直接用select，結(jié)果發(fā)現(xiàn)某些樣式不支持，只好用div模擬了以下.大家根據(jù)個(gè)人需要適當(dāng)添加，對(duì)jquery雙向選擇器知識(shí)感興趣的朋友一起看看吧
2016-11-11
使用jquery實(shí)現(xiàn)放大鏡效果
相信大家都見過或使用過放大鏡效果，甚至實(shí)現(xiàn)過該效果，它一般應(yīng)用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。那么接下來，我們將向大家介紹通過jQuery實(shí)現(xiàn)放大鏡效果。
2014-09-09
jQuery倒計(jì)時(shí)代碼(超簡單)
本文給大家分享一段超簡單的代碼基于jquery實(shí)現(xiàn)倒計(jì)時(shí)功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
2017-02-02