jQuery: Effect Methods
jQuery provides a wide range of effect methods to create animations and transitions. These methods help in enhancing the user experience by adding interactive elements to web pages.
Key Methods and Descriptions
| Method | Description | Example |
|---|---|---|
animate() |
Perform custom animation using element's style properties. | $('#myDiv').animate({ height: '200px', width: '200px' }); |
clearQueue() |
Remove all the animations from the queue that have not been run. | $('#myDiv').clearQueue(); |
delay() |
Set a timer to delay execution of animations in the queue. | $('#myDiv').delay(5000); |
dequeue() |
Execute the next animation in the queue for the selected element. | $('#myDiv').dequeue(); |
queue() |
Show or manipulate the queue of functions to be executed on the selected element. | $('#myDiv').queue().length |
fadeIn() |
Display selected element(s) by fading them to opaque. | $('#myDiv').fadeIn(5000); |
fadeOut() |
Hides selected element(s) by fading them to transparent. | $('#myDiv').fadeOut(5000); |
fadeTo() |
Adjust the opacity of the selected element(s). | $('#myDiv').fadeTo(500); |
fadeToggle() |
Display or hide the selected element(s) by animating their opacity. | $('#myDiv').fadeToggle(5000); |
finish() |
Stop currently running animation and clear the queue for selected element(s). | $('#myDiv').finish(); |
jQuery.fx.interval |
The rate at which animation fires. | $.fx.interval = 2000; |
jQuery.fx.off |
Disable all the animations globally. | $.fx.off = true; |
hide() |
Hide selected element(s). | $('#myDiv').hide(5000); |
show() |
Display selected element(s). | $('#myDiv').show(5000); |
stop() |
Stop currently running animations on the selected element(s). | $('#myDiv').stop(); |
toggle() |
Display hidden element(s) or hide visible element(s). | $('#myDiv').toggle(5000); |
slideUp() |
Hide selected element(s) with sliding up motion. | $('#myDiv').slideUp(5000); |
slideDown() |
Display selected element(s) with sliding down motion. | $('#myDiv').slideDown(5000); |
slideToggle() |
Display or hide selected element(s) with sliding motion. | $('#myDiv').slideToggle(5000); |