📅  最后修改于: 2020-10-23 07:25:41             🧑  作者: Mango
本章将讨论effect()方法,这是用于管理jQueryUI视觉效果的方法之一。 effect()方法将动画效果应用于元素,而不必显示或隐藏它。
effect()方法具有以下语法-
.effect( effect [, options ] [, duration ] [, complete ] )
Sr.No. | Parameter & Description |
---|---|
1 |
effect This is a String indicating which effect to use for the transition. |
2 |
options This is of type Object and indicates effect-specific settings and easing. Additionally, each effect has its own set of options that can be specified common across multiple effects described in the table jQueryUI Effects. |
3 |
duration This is of type Number or String, and indicates the number of milliseconds of the effect. Its default value is 400. |
4 |
complete This is a callback method called for each element when the effect is complete for this element. |
下表描述了可与effects()方法一起使用的各种效果-
Sr.No. | Effect & Description |
---|---|
1 |
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. |
2 |
bounce Causes the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element. |
3 |
clip Shows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa. |
4 |
drop Shows or hides the element by making it appear to drop onto, or drop off of, the page. |
5 |
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. |
6 |
fade Shows or hides the element by adjusting its opacity. This is the same as the core fade effects, but without options. |
7 |
fold Shows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders. |
8 |
highlight Calls attention to the element by momentarily changing its background color while showing or hiding the element. |
9 |
puff Expands or contracts the element in place while adjusting its opacity. |
10 |
pulsate Adjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified. |
11 |
scale Expands or contracts the element by a specified percentage. |
12 |
shake Shakes the element back and forth, either vertically or horizontally. |
13 |
size Resizes the element to a specified width and height. Similar to scale except for how the target size is specified. |
14 |
slide Moves the element such that it appears to slide onto or off of the page. |
15 |
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. |
以下示例演示了上表中列出的具有不同效果的effect()方法的使用。
jQuery UI effect Example
Click On Me
让我们将上面的代码保存在HTML文件effectexample.htm中,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。现在,您可以处理结果了-
jQuery UI effect Example
让我们将上面的代码保存在HTML文件effectexample.htm中,并在支持javascript的标准浏览器中将其打开,您还必须看到以下输出。现在,您可以处理结果了-