jQuery UI | effect() 方法

概述

effect() 方法是 jQuery UI 中提供的用于在 HTML 元素上添加动画效果的方法。它基于 jQuery 的核心动画方法 animate()，但提供了更多自定义的动画选项。

使用方法

effect() 方法可以在任何 HTML 元素上使用。以下是 effect() 方法的常见用法：

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

其中，参数含义如下：

• selector：必需，用于选中要添加动画效果的 HTML 元素的选择器。

• effectName：必需，指定要使用的动画效果名称，例如 fadeIn、explode、bounce 等。

• options：可选，是一个对象，用于指定动画效果的自定义选项。具体选项取决于所使用的动画效果。以下是 explode 效果中的可用选项示例：

  { 
    pieces: 9,  // 爆炸破碎的次数 
    easing: 'easeOutExpo' // 动画缓动函数 
  }
  

• duration：可选，表示动画的持续时间，单位为毫秒。

• callback：可选，表示动画结束时要执行的回调函数。

实例

以下是一些常见的实例：

淡入效果

下面的代码使用 fadeIn 效果在 DIV 元素上添加淡入效果：

$('div').effect('fadeIn', options, duration, callback);

折叠效果

以下代码使用 fold 效果在 DIV 元素上添加一个折叠效果：

$('div').effect('fold', options, duration, callback);

爆炸效果

以下代码使用 explode 效果在 DIV 元素上添加一个爆炸效果：

$('div').effect('explode', options, duration, callback);

结论

effect() 方法为开发人员提供了一种简单但强大的方式来为 HTML 元素添加动画效果。它能使页面更加生动有趣。