jQuery的淡入和淡出简单介绍

最新推荐文章于 2023-12-14 19:51:15 发布

Python之眼

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量174

点赞数

分类专栏： JQuery 文章标签：程序员新手入门 JQuery

本文链接：https://blog.csdn.net/weixin_42625143/article/details/99297039

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在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     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
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     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
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     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
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     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
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>

Python之眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的淡入和淡出简单介绍

在jQuery中的一些特效中，可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面为分别为大家介绍各个方式的使用。jQuery fadeIn() 用于淡入已经被隐藏的元素，例子：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head...
复制链接

扫一扫