jQuery fadeToggle()方法

jQuery fadeToggle() 方法是一种在元素之间淡入淡出的效果。该方法可以用于隐藏和显示元素。在调用该方法时，元素的透明度属性和可见性属性都由 jQuery 来进行处理。

语法

$(selector).fadeToggle(speed,easing,callback);

参数说明：

必选参数 selector：我们需要添加淡入淡出效果的元素。
非必选参数 speed：使元素淡入和淡出的速度。可以是 "slow"，"fast" 或毫秒。（默认是“normal”）。
非必选参数 easing：规定要使用的缓动效果的类型，比如"linear"，"swing"等。（默认是“swing”）。
非必选参数 callback：在动画结束时要执行的函数。callback 参数是一个函数名或包含函数名的字符串。

示例说明

示例1

下面是一个简单的 fadeToggle() 示例，它使用默认参数将文本框淡入淡出（toggle）：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test").fadeToggle();
      });
    });
  </script>
  <style>
    #test {
      width: 200px;
      height: 100px;
      background-color: #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>

<button id="btn1">Toggle</button>
<br><br>

<div id="test">这是一个文本框</div>

</body>
</html>

在上面的示例中，当单击“Toggle”按钮时，文本框将切换淡入淡出效果。

示例2

下面是一个稍微复杂一些的 fadeToggle() 示例，它使用特定速度和回调函数：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test").fadeToggle(1000,function(){
          alert("fadeToggle Completed");
        });
      });
    });
  </script>
  <style>
    #test {
      width: 200px;
      height: 100px;
      background-color: #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>

<button id="btn1">Toggle</button>
<br><br>

<div id="test">这是一个文本框</div>

</body>
</html>

在上面的示例中，当单击“Toggle”按钮时，文本框将在 1 秒内切换淡入淡出效果，并在完成后弹出警告框。

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

语法

示例说明

示例1

示例2

相关文章