jQuery UI框架提供了effect()方法来管理所选元素上的各种视觉效果,而无需使用 show() 和 hide() 方法。有许多类型的效果作为参数传递给effect()方法。
句法:
$(selector).effect(effectType[, options ] [, duration ] [, complete ]);
参数:此方法接受上面提到和下面描述的四个参数:
- effectType:为所选元素的视觉过渡选择的效果类型。
- 选项:选项或设置用于缓动效果。
- 持续时间:用于运行动画效果的时间或持续时间(以毫秒为单位)。默认值为 400 毫秒。
- complete:这是视觉效果完成时执行的回调函数。
jQuery UI 的链接:
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
有多种effectType可以根据项目要求传递给effect()方法。在下面的示例中,我们将仅展示其中的一些以及输出图像。
示例 1:下面的示例演示带有抖动效果的 jQuery UI effect()方法,选项设置为time和distance 。
jQuery UI effect method
GeeksforGeeks
jQuery UI effect method with shake option
Click this to see the Shake effect!
输出:
示例 2:以下代码演示了 jQuery UI effect()方法,具有爆炸效果,缓动设置为“swing”。
jQuery UI effect with explode
GeeksforGeeks
jQuery UI effect method with explode option
Click this to see the explode effect!
输出:
示例 3:以下示例演示了具有反弹效果类型的effect()方法。
jQuery UI effect Method with bounce
GeeksforGeeks
jQuery UI effect method with bounce
Click this to see bounce effect
输出: