web前端入门到实战： jQuery的淡入淡出

最新推荐文章于 2023-04-25 15:27:41 发布

魔方编程

最新推荐文章于 2023-04-25 15:27:41 发布

阅读量148

点赞数 1

文章标签：前端 web前端前端开发前端基础 jquery

本文链接：https://blog.csdn.net/wewfdf/article/details/98747593

版权

在jQuery中的一些特效中，可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，下面为分别为大家介绍各个方式的使用。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery淡入</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;display:none;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeIn();
                     $("#div2").fadeIn(1000);
                      $("#div3").fadeIn("slow");
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeIn()不同参数的效果。</p>
     <button>点击淡入 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery淡出</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeOut();
                     $("#div2").fadeOut(1000);
                      $("#div3").fadeOut("slow");
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeIn()不同参数的效果。</p>
     <button>点击淡出 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeToggle()切换</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeToggle();
                     $("#div2").fadeToggle(1000);
                      $("#div3").fadeToggle("slow");
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeToggle() 不同参数的效果。</p>
     <button>点击切换 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeTo透明度</title>
    <style>
        *{margin:0;padding:0;}
         div{width:50px;height:50px;margin:10px;}
         #div1{background: green;}
         #div2{background: orange;}
         #div3{background: yellow;}
    </style>
    <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function(){
           $("button").click(function(){
                    $("#div1").fadeTo("slow",0.15);
                 $("#div2").fadeTo("slow",0.4);
                  $("#div3").fadeTo("slow",0.7);
           });
           });
      </script>
</head>
<body>
     <p>实例演示了 fadeTo不同参数的效果。</p>
     <button>点击fadeTo透明度 div 元素。</button>
     <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

魔方编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战： jQuery的淡入淡出

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

扫一扫