📅 最后修改于: 2020-11-28 04:02:51 🧑 作者: Mango
effect()方法用于将动画效果应用于元素，而不必显示或隐藏它。这是用于管理jQuery UI视觉效果的方法之一。
句法：
.effect( effect [, options ] [, duration ] [, complete ] )
effect()方法的参数：
最常用的jQuery UI效果：
添加表格：
| Effect | Description |
|---|---|
| Blind | Shows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode. |
| Bounce | Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element. |
| Clip | Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa. |
| Explode | Shows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page. |
| Drop | Shows or hides the element by making it appear to drop onto, or drop off of, the page. |
| Fade | Shows or hides the element by adjusting its opacity. this is the same as the core fade effects, but without options. |
| Fold | Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders. |
| Highlight | Calls attention to the element by momentarily changing its background color while showing or hiding the element. |
| Puff | Expands or contracts the element in place while adjusting its opacity. |
| Shake | Shakes the element back and forth, either vertically or horizontally. |
| Scale | Expands or contracts the element by a specified percentage. |
| Pulsate | Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified. |
| Size | Resizes the element to a specified width and height. similar to scale except for how the target size is specified. |
| Slide | Moves the element such that it appears to slide onto or off of the page. |
| Transfer | Animates a transient outline element that makes the element appear to transfer to another element. the appearance of the outline element must be defined via css rules for the ui-effects-transfer class, or the class specified as an option. |
1.震动效果：
让我们以一个示例来指定抖动效果。
jQuery UI effect Example
Click here to
Shake Me!
2.弹跳效果：
让我们以一个示例来指定反弹效果。
jQuery UI effect Example
Click here to
Bounce Me!
3.爆炸效果：
让我们以一个示例来指定爆炸效果。
jQuery UI effect Example
Click here to
Explode Me!
4.盲效应：
让我们以一个示例来指定盲效果。
jQuery UI effect Example
Click here to
Blind Me!
5.剪辑效果：
让我们以一个示例来指定剪辑效果：
jQuery UI effect Example
Click here to
Clip Me!
6.掉落效果：
让我们以一个示例来指定放置效果：
jQuery UI effect Example
Click here to
Drop Me!
7.淡入淡出效果：
让我们以一个示例来指定淡入淡出效果：
jQuery UI effect Example
Click here to
Fade Me!
8.折叠效果：
让我们以一个示例来指定折叠效果：
jQuery UI effect Example
Click here to
Fold Me!
9.突出显示效果：
让我们以一个示例来指定突出显示效果。
jQuery UI effect Example
Click here to
Highlight Me!
10.泡芙效果：
让我们以一个示例来指定粉扑效果。
jQuery UI effect Example
Click here to
Puff Me!
11.缩放效果：
让我们以一个示例来指定缩放效果。
scale demo
Click anywhere to toggle the box.
12.脉动效应：
让我们以一个示例来指定脉动效果。
jQuery UI effect Example
Click here to
Pulsate Me!
13.尺寸效应：
让我们举个例子来调整盒子的大小。
scale demo
Click anywhere to toggle the size of the box.
14.幻灯片效果：
让我们以一个示例来指定幻灯片效果：
jQuery UI effect Example
Click here to
Slide Me!