jQuery特效 fadeOut()方法

当我们需要在我们的网页上进行类似于淡出或变暗的效果时，jQuery就可以发挥作用了。其中，fadeOut()方法就是一个进行淡出动画的函数，在使用方法前，需要首先引入jQuery库。

方法语法

$(selector).fadeOut(speed,easing,callback)

selector：必需。要进行淡出动画的元素，可以使用任何 jQuery 选择器。
speed：可选。规定效果的时长。默认是 "normal"。
easing：可选。规定正在使用的 easing 动画。默认是 "swing"。
callback：可选。淡出动画完成后所要执行的函数名称。

方法描述

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素已经带有不透明度，则该效果可以将其降低到指定的不透明度的水平。并且，fadeOut() 方法将会把匹配的元素集合中的每一个元素逐渐减小透明度，从而达到淡出的效果。

示例演示

示例一

下面以亮度渐变方式来隐藏元素。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeOut();
      });
    });
  </script>
</head>

<body>
  <div id="div1"></div>
  <br>
  <button>单击隐藏div</button>
</body>
</html>

在上述例子中，当点击按钮之后，将会让id为“div1”的div元素渐变淡出。

示例二

接下来，我们将在fadeOut()中添加回调函数，并同时使用回调函数、速度和easing参数。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeOut("slow", function(){
          alert("淡出完成后触发了回调函数！");
        });
      });
    });
  </script>
</head>

<body>
  <div id="div1"></div>
  <br>
  <button>单击隐藏div</button>
</body>
</html>

在上例中，当点击按钮之后，将会以慢速度淡出div元素，并出现信息框告诉我们“淡出完成后触发了回调函数！”

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery特效 fadeOut()方法 - Python技术站

jQuery特效 fadeOut()方法

方法语法

方法描述

示例演示

示例一

示例二

相关文章