當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery的淡入和淡出简单介绍

發布時間：2024/9/30 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery的淡入和淡出简单介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在jQuery中的一些特效中，可以通過四個方法來實現元素的淡入淡出，這四個方法分別是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面為分別為大家介紹各個方式的使用。

jQuery fadeIn() 用于淡入已經被隱藏的元素，例子：

1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>jquery淡入</title>6 <style>7 *{margin:0;padding:0;}8 div{width:50px;height:50px;margin:10px;display:none;}9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13  14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeIn(); 19 $("#div2").fadeIn(1000); 20 $("#div3").fadeIn("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>實例演示了 fadeIn()不同參數的效果。</p> 27 <button>點擊淡入 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>

jQuery fadeOut() 用于淡入已經被隱藏的元素，例子：

-------------------------------------------------------------------- 注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 --------------------------------------------------------------------1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>jquery淡出</title>6 <style>7 *{margin:0;padding:0;}8 div{width:50px;height:50px;margin:10px;}9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13  14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeOut(); 19 $("#div2").fadeOut(1000); 20 $("#div3").fadeOut("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>實例演示了 fadeIn()不同參數的效果。</p> 27 <button>點擊淡出 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>fadeToggle()切換</title>6 <style>7 *{margin:0;padding:0;}8 div{width:50px;height:50px;margin:10px;}9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13  14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeToggle(); 19 $("#div2").fadeToggle(1000); 20 $("#div3").fadeToggle("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>實例演示了 fadeToggle() 不同參數的效果。</p> 27 <button>點擊切換 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>

jQuery fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)。

1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>fadeTo透明度</title>6 <style>7 *{margin:0;padding:0;}8 div{width:50px;height:50px;margin:10px;}9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13  14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeTo("slow",0.15); 19 $("#div2").fadeTo("slow",0.4); 20 $("#div3").fadeTo("slow",0.7); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>實例演示了 fadeTo不同參數的效果。</p> 27 <button>點擊fadeTo透明度 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>

總結

以上是生活随笔為你收集整理的jQuery的淡入和淡出简单介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。