jQuery - SPLessons
boy2

jQuery Effects

Home > Lesson > Chapter 11
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Effects

jQuery Effects

shape Description

jQuery enables the developer to provide a interface to create cool and wonderful animations and effects on a web page. Some of them are fadeIn, slideDown, hide, toggle etc. In jQuery, number of methods are used to apply effects quickly with a minimum configuration to a web page.

jQuery Effects Types

The jQuery effects can be categorized mainly into 4 types:

jQuery hide() and show()

shape Description

jQuery show() method shows the HTML elements of the document and jQuery hide() method hides the HTML elements of the document.

shape Syntax

hide() method:
$(selector).hide( speed, [callback] );
hide() method:
$(selector).show( speed, [callback] );
  • speed: This is optional and is represented by three predefined String speed ("slow", "normal", "fast"). Otherwise, number represented by milliseconds can also be given.(Ex: 5000).
  • callback: This is optional parameter and is used to represent a function to execute whenever effect is completed.
[html] <html> <head> <title>jQuery hide() and show()</title> </head> <body> <h1>Welcome to SPLessons</h1> <div id="first" style="background:#3d9a44;">Visible</div> <div id="second" style="display:none;background:#7d5667;">Invisible</div><br /> <button>Click</button> </body> </html> [/html] [javascript] $(document).ready(function() { $("button").click(function() { $("#first").hide("slow"); $("#second").show("slow"); }); }); [/javascript] Output:
SPLessons

jQuery Fading Methods

shape Description

jQuery has the following fade methods: fadeIn() : To fade in a hidden element fadeIn method is used. fadeOut() : To fade out the visible elements fadeout method is used. fadeToggle() : If HTML element are hidden jQuery fadeToggle method is used to fade in a hidden element.

shape Syntax

  • $(selector).fadeOut( speed, [callback] );
  • $(selector).fadeIn( speed, [callback] );
  • $(selector).fadeToggle( speed, [callback] );
where
  • speed: This is optional and is pre-defined with three string speeds ("slow", "normal", "fast") or else one can give value represented as milliseconds (Ex. 5000).
  • callback: This is a parameter which is optional and is used to represent a function that executes whenever effect is finished.
[html] <html> <head> <title>jQuery fadeIn() and fadeOut()</title> </head> <body> <h1>Welcome to SPLessons</h1> <div id="first" style="background:#3d9a44;">Visible</div> <div id="second" style="display:none;background:#7d5667;">Invisible</div><br /> <button>Click</button> </body> </html> [/html] [javascript] $(document).ready(function() { $("button").click(function() { $("#first").fadeOut(6000); $("#second").fadeIn(6000); }); }); [/javascript] Output:
SPLessons

jQuery Sliding Methods

shape Description

jQuery slide methods are used to check if the height of an element is visible or hidden in a selected number of elements. jQuery Slide Method mainly supports three methods. jQuery has the following sliding methods: slideUp() : This method is used to hide the selected elements with a sliding motion. slideDown() : This method displays the elements that are selected with a sliding motion. slideToggle() : If HTML elements are hidden slideToggle() method displays the selected elements with a sliding motion or HTML elements displays slideToggle() method to hide the selected elements with a sliding motion. In other words, slideToggle() method toggles between slideUp and slideDown methods.

shape Syntax

  • $(selector).slideDown( speed, [callback] );
  • $(selector).slideUp( speed, [callback] );
  • $(selector).slideToggle( speed, [callback] );
  • speed : This is an optional parameter and is represented with three predefined string speeds ("slow", "normal", "fast") or else one can give value represented by milliseconds (Ex. 5000).
  • callback: : This parameter is optional and is used to represent a function which executes once the effect is finished.
[html] <html> <head> <title>jQuery slideUp() and slideDown()</title> </head> <body> <h1>Welcome to SPLessons</h1> <div id="first" style="background:#3d9a44;">Visible</div> <div id="second" style="display:none;background:#7d5667;">Invisible</div><br /> <button>Click</button> </body> </html> [/html] [javascript] $(document).ready(function() { $("button").click(function() { $("#first").slideUp(6000); $("#second").slideDown(6000); }); }); [/javascript] Output:
SPLessons

jQuery animate() method

shape Description

The animate() method of jQuery is used to apply custom animations. CSS properties can be used to create their own animations.

shape Syntax

$(selector).animate({css_property},[duration],[callback]);
  • css_property : This parameter is used to define CSS properties.
  • speed : This is optional and it is represented by three predefined String speed ("slow", "normal", "fast").Otherwise, one can give number represented by milliseconds (Ex. 5000).
  • callback : This is an optional parameter and is used to represent a function to execute whenever effect is finished.
[html] <html> <head> <title>jQuery animate()</title> </head> <body> <h1>Welcome to SPLessons</h1> <div id="first" style="background:#3d9a44;">Visible</div> <div id="second" style="display:none;background:#7d5667;">Invisible</div><br /> <button>Click</button> </body> </html> [/html] [javascript] $(document).ready(function() { $("button").click(function() { $("#first").animate({width:"100px",height:"100px"},6000,function() { alert(&quot;animate is done !&quot;); }); }); }); [/javascript] Output:
SPLessons

Summary

shape Key Points

  • Hide/Show ,Fade,Sliding and Animation Effects are the various type of jQuery effects.
  • fadeIn(),fadeOut() and fadeToggle() are the fading effects in jQuery.
  • Up,Down and Toggle are various sliding effects.
Hide Index Show Index
Chapter 11