Category Archives: Jquery
jQuery Slide Toggle
jQuery Slide Toggle : If you want toggle functionality in your web page you can add this with $(selector).slideToggle(speed,callback).
Syntax of jQuery Slide Toggle
Here is syntax to create slide toggle effect in jQuery.
$(selector).slideToggle(speed,callback);
Speed : Speed is optional. Add milliseconds you want to toggle.
Callback : Callback function is optional. You can add function to be called when it completes the sliding effect.
jQuery Slide Toggle More Examples
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No, Slide Down Effect ,Syntax, Example & Demo
1,Slide Toggle “slow”, $(selector).slideToggle(“slow”);,See Detail & Demo »
1,Slide Toggle “fast”,$(selector).slideToggle(“fast”);,See Detail & Demo »
1,Slide Toggle “miliseconds”,$(selector).slideToggle(600);,See Detail & Demo »
[/table]
jQuery Slide Some Common Examples
Coming soon more simplifying use of jQuery …
jQuery Slide Up
jQuery slide down slides up the html elements.
Syntax of jQuery Slide Down
$(selector).slideUp(speed,callback);
jQuery Slide Up More Examples
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No, Slide Up Effect ,Syntax, Example & Demo
1,Slide Up “slow”, $(selector).slideUp(“slow”);,See Detail & Demo »
1,Slide Up “fast”,$(selector).slideUp(“fast”);,See Detail & Demo »
1,Slide Up “miliseconds”,$(selector).slideUp(600);,See Detail & Demo »
[/table]
jQuery Slide Down
jQuery Slide Down Creates sliding effects in the elements.
jQuery Slide Down
jQuery slide down the elements with time control.
Syntax of jQuery Slide Down
$(selector).slideDown(speed,callback);
jQuery Slide Down More Examples
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No, Slide Down Effect ,Syntax, Example & Demo
1,Slide Down “slow”, $(selector).slideDown(“slow”);,See Detail & Demo »
1,Slide Down “fast”,$(selector).slideDown(“fast”);,See Detail & Demo »
1,Slide Down “miliseconds”,$(selector).slideDown(600);,See Detail & Demo »
[/table]
jQuery fade toggle
jQuery fade toggle – jQuery fadeto toggle is used to toggle between the fadeIn() and fadeOut().
It chages the state.
– if the elements state is visible it makes them hidden and if element is hidden it will make them visible.
Syntax of jQuery fadeToggle
$(selector).fadeToggle(speed,callback);
Speed Parameter – specifies the speed of the effect.
Speeds available are :
– slow
– fast
– or in miliseconds ex. 600
Callback Parameter- Is function name which is called when transition is complete.
jQuery Fade Toggle More Examples
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No, Fade Toggle Effect ,Syntax, Example & Demo
1,Fade Toggle “slow”, $(selector).fadeToggle(“slow”);,See Detail & Demo »
1,Fade Toggle “fast”,$(selector).fadeToggle(“fast”);,See Detail & Demo »
1,Fade Toggle “miliseconds”,$(selector).fadeToggle(600);,See Detail & Demo »
[/table]
jQuery fade Out
jQuery fadeOut provides fade out functionality to the visible elements.
Syntax of jQuery Fade Out
$(selector).fadeOut(speed,callback);
Speed Parameter – specifies the speed of the effect.
Speeds available are :
– slow
– fast
– or in miliseconds ex. 600
Callback Parameter- Is function name which is called when transition is complete.
jQuery Fade Out More Examples
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No, Fade Out Effect ,Syntax, Example & Demo
1,Fade Out “slow”, $(selector).fadeOut(“slow”);,See Detail & Demo »
1,Fade Out “fast”,$(selector).fadeOut(“fast”);,See Detail & Demo »
1,Fade Out “miliseconds”,$(selector).fadeOut(600);,See Detail & Demo »
[/table]
jQuery Fade In
jQuery fadeIn provides fade in functionality ie. fade in to the hidden elements.
Syntax of jQuery Fade In
$(selector).fadeIn(speed,callback);
Speed Parameter – specifies the speed of the effect.
Speeds available are :
– slow
– fast
– or in miliseconds ex. 600
Callback Parameter- Is function name which is called when transition is complete.
jQuery Fade In More Examples
[table width=”100%” colwidth=”20|100|50″ colalign=”left|left|center|left|right”]
No, Fade In Effect ,Syntax, Example & Demo
1,Fade In “slow”, $(selector).fadeIn(“slow”);,See Detail & Demo »
1,Fade In “fast”,$(selector).fadeIn(“fast”);,See Detail & Demo »
1,Fade In “milliseconds”,$(selector).fadeIn(600);,See Detail & Demo »
[/table]
jQuery toggle
jQuery toggle is used to provide the toggle functionality between the hide() and show() method.
It hides the shown elements and shows the hidden elements.
Syntax : jQuery toggle
$(selector).toggle(speed,selector);
jQuery toggle Example 1 :
jQuery toggle Example 2 :
jQuery toggle
jQuery Hide and Show
jQuery Hide and Show method is used to hide and show the html elements.
jQuery Hide and Show Syntax :
$(selector).hide(speed,selector); $(selector).show(speed,selector);
jQuery Hide and Show Example 1:
hide() : Hides the html elements.
show() : Displays the html elements.
jQuery Hide and Show Example 2:
jQuery Events
jQuery Events represents the happenings in the page.
jQuery Event Types with Example
- Button click
- Mouseover
- Scrolling page
- Selecting check box
- Double click
- Keypress
