Hi all,
jQuery offers you easy interface for doing many kind of effects with easy and minimum code configuration.
In this post some of important jQuery methods for visual effects.
hide() and show()
For showing and hiding element(s) is too easy you just need show() for show and hide() to hide.
Syntax -
[selector].show( speed, [callback] );
[selector].hide( speed, [callback] );
speed − This string represent three predefined speed value (slow, normal or fast) or you can add number of milliseconds (1000 eg.)
callback − This is a optional parameter which represents a function to be executed whenever the animation completes, executes once again each element.
jQuery toggle()
This is use for showing and hiding elements. If the element is displayed, it will be hide; if hide then it will be shown.
Syntax -
[selector]..toggle([speed][, callback]);
Some other JQuery Effect -
| S.N. |
Methods & Description |
| 1 |
animate( params, [duration, easing, callback] )
This function is use for making animation(s). |
| 2 |
fadeIn( speed, [callback] )
To use this effect we can fade in every coordinated element's by adjusting their opacity |
| 3 |
fadeOut( speed, [callback] )
This effect use to fade out all match elements, basically, it makes display to none of the objects. |
| 4 |
fadeTo( speed, opacity, callback )
It fades the opacity to a particular value (opacity value) and optionally callback after completion. |
| 5 |
slideDown( speed, [callback] )
To use it we can increase the particular element(s) height vertically , and callback optionally. |
| 6 |
slideToggle( speed, [callback] )
To use it we can increase and decrease the particular element(s) height vertically , and callback optionally. |
| 7 |
slideUp( speed, [callback] )
Hide all matched elements by adjusting their height |
| 8 |
sstop( [clearQueue, gotoEnd ])
Stops all the currently running animations on all the specified elements. |
| 9 |
stoggle( )
Toggle displaying each of the set of matched elements. |
| 10 |
toggle( speed, [callback] )
it displays each of the set of matched elements using a graceful animation. |
| 11 |
toggle( switch )
It will display the matched set of elements based upon the switch (true shows all elements, false hides all elements). |
Here are some more effects based on UI Library
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js
We will learn this in next post :-)
0 Comment(s)