jQuery UI | effect() 方法(1)

📌 相关文章

📜 jQuery UI | effect() 方法(1)

📅 最后修改于: 2023-12-03 15:02:12.108000 🧑 作者: Mango

jQuery UI | effect() 方法

简介

在jQuery UI中，effect() 方法用于在HTML元素上实现动画效果。该方法可以对元素进行淡入淡出、缩放、滑动、展开等多种动画效果。

语法

$(selector).effect(effectName, options, duration, complete);

参数说明：

selector: 必需，用于指定要应用动画效果的元素。
effectName: 必需，用于指定要应用的动画效果名称。
options: 可选，一个对象，包含一些指定动画效果的选项。
duration: 可选，动画效果的持续时间，单位为毫秒。
complete: 可选，当动画效果完成时要执行的函数。

常用效果

淡入淡出

淡入效果：

$(selector).fadeIn(duration, complete);

淡出效果：

$(selector).fadeOut(duration, complete);

缩放

缩小效果：

$(selector).effect("scale", {percent: 50});

放大效果：

$(selector).effect("scale", {percent: 200});

滑动

向上滑动效果：

$(selector).slideUp(duration, complete);

向下滑动效果：

$(selector).slideDown(duration, complete);

展开

展开效果：

$(selector).show("explode", options, duration, complete);

示例

以下示例演示了如何使用effect() 方法实现元素的淡入淡出效果：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI | effect() 方法</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <button id="fadeInBtn">淡入</button>
  <button id="fadeOutBtn">淡出</button>
  <div id="box"></div>
  <script>
    $(function() {
      $("#fadeInBtn").click(function() {
        $("#box").fadeIn();
      });
      $("#fadeOutBtn").click(function() {
        $("#box").fadeOut();
      });
    });
  </script>
</body>
</html>

总结

effect() 方法是jQuery UI提供的一个强大的动画效果插件，它可以让我们轻松实现各种精美的动画效果，提升网站的用户体验。我们可以根据自己的需求，选择合适的动画效果对页面进行优化。