jQuery UI effect() 方法

jQuery UI effect() 方法详解

概述

jQuery UI 中的 effect()方法是用于实现动态效果的函数。该函数提供了多种动态效果，例如 fadeIn()、 fadeOut()、slideUp()、slideDown() 等。这些效果在网页设计中非常常用，可以帮助提高网站的用户体验。

基本用法

effect() 方法的基本语法如下：

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

其中，参数 effect 表示动态效果的名称，根据不同的效果名称，具体的配置参数也会有差异。参数 options 和 duration 表示配置参数和持续时间，具体的设置可以在 jQuery UI 官网上查找。

实例演示

下面我们来看两个使用 effect() 方法的示例：

示例1：slideDown() 方法实现下拉菜单效果

在下面的示例中，我们会使用 slideDown() 方法实现一个简单的下拉菜单效果。

HTML 代码：

<button>显示菜单</button>
<ul style="display:none;">
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
</ul>

JavaScript 代码：

$(document).ready(function () {
  $("button").click(function () {
    $("ul").slideDown("slow");
  });
});

在上面的代码中，我们首先使用 jQuery 的 ready 函数来等待文档加载完成。接着，我们给按钮添加了一个 click 事件。当按钮被点击后，我们使用 slideDown() 方法将列表展开。

示例2：shake 方法实现抖动效果

在下面的示例中，我们会使用 shake 方法实现一个简单的抖动效果。

HTML 代码：

<button>抖动按钮</button>

JavaScript 代码：

$(document).ready(function () {
  $("button").click(function () {
    $("button").effect("shake", {times: 4, distance: 10});
  });
});

在上面的代码中，我们首先也是使用 jQuery 的 ready 函数来等待文档加载完成。接着，我们给按钮添加了一个 click 事件。当按钮被点击后，我们使用 effect() 方法 加载 "shake" 效果，设置了 times 和 distance 参数，表示抖动的次数和距离。

总结

jQuery UI 中的 effect() 方法为我们提供了众多常用的动态效果，可以帮助我们简单快速地实现各种动态效果。要使用 effect() 方法，我们需要注意传入分别三个参数：动态效果名称、动效配置参数、动画持续时间。同时我们还演示了两个具体的使用示例，供大家学习实践。