📅  最后修改于: 2020-10-23 07:26:30             🧑  作者: Mango
本章将讨论hide()方法,该方法是用于管理jQueryUI视觉效果的方法之一。 effect()方法将动画效果应用于隐藏元素。
hide()方法具有以下语法-
.hide( 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. |
下表描述了可与hide()方法一起使用的各种效果-
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. |
14 |
size Resizes the element to a specified width and height. Similar to scale except for how the target size is specified. |
15 |
slide Moves the element such that it appears to slide onto or off of the page. |
16 |
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. |
以下示例演示了上表中列出的hide()方法的使用,其效果不同。
下面的示例显示了具有盲效的hide()方法的使用。单击按钮“隐藏效果隐藏”以查看元素隐藏之前的隐藏效果。
jQuery UI hide Example
Blind Effect Hide
让我们将以上代码保存在HTML文件hideexample.htm中,并在支持javascript的标准浏览器中将其打开,您应该看到以下输出。现在,您可以处理结果了-
下面的示例示出了使用抖动()方法的使用盲效果。单击按钮“震动效果隐藏”以在元素隐藏之前查看震动效果。
jQuery UI hide Example
Shake Effect Hide
让我们将上面的代码保存在HTML文件hideexample.htm中,并在支持javascript的标准浏览器中将其打开,您还必须看到以下输出。现在,您可以处理结果了-