- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery - Effects Reference
jQuery Effect Methods
Following table lists down all the important jQuery Effect Methods to create different types of effects.
Sr.No. | Methods & Description |
---|---|
1 | animate( params, [duration, easing, callback] )
A function for making custom animations. |
2 | fadeIn( speed, [callback] )
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. |
3 | fadeOut( speed, [callback] )
Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion. |
4 | fadeTo( speed, opacity, callback )
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. |
5 | hide( )
Hides each of the set of matched elements if they are shown. |
6 | hide( speed, [callback] )
Hide all matched elements using a graceful animation and firing an optional callback after completion. |
7 | show( )
Displays each of the set of matched elements if they are hidden. |
8 | show( speed, [callback] )
Show all matched elements using a graceful animation and firing an optional callback after completion. |
9 | slideDown( speed, [callback] )
Reveal all matched elements by adjusting their height and firing an optional callback after completion. |
10 | slideToggle( speed, [callback] )
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion. |
11 | slideUp( speed, [callback] )
Hide all matched elements by adjusting their height and firing an optional callback after completion. |
12 | stop( [clearQueue, gotoEnd ])
Stops all the currently running animations on all the specified elements. |
13 | toggle( )
Toggle displaying each of the set of matched elements. |
14 | toggle( speed, [callback] )
Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. |
15 | toggle( switch )
Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements). |
16 | jQuery.fx.off
Globally disable all animations. |
UI Library Based Effects
To use these effects you can either download latest jQuery UI Library jquery-ui-1.11.4.custom.zip from jQuery UI Library or use Google CDN to use it in the similar way as we have done for jQuery.
We have used Google CDN for jQuery UI using following code snippet in the HTML page so we can use jQuery UI −
<head> <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> </head>
Sr.No. | Methods & Description |
---|---|
1 | Blind
Blinds the element away or shows it by blinding it in. |
2 | Bounce
Bounces the element vertically or horizontally n-times. |
3 |
Clip
Clips the element on or off, vertically or horizontally. |
4 | Drop
Drops the element away or shows it by dropping it in. |
5 | Explode
Explodes the element into multiple pieces. |
6 | Fold
Folds the element like a piece of paper. |
7 | Highlight
Highlights the background with a defined color. |
8 | Puff
Scale and fade out animations create the puff effect. |
9 | Pulsate
Pulsates the opacity of the element multiple times. |
10 | Scale
Shrink or grow an element by a percentage factor. |
11 | Shake
Shakes the element vertically or horizontally n-times. |
12 | Size
Resize an element to a specified width and height. |
13 | Slide
Slides the element out of the viewport. |
14 | Transfer
Transfers the outline of an element to another. |
To Continue Learning Please Login
Login with Google