jQuery - SPLessons

Chapter 11

jQuery Effects

jQuery Effects

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()

jQuery show() method shows the HTML elements of the document and jQuery hide() method hides the HTML elements of the document.
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>
<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>

$(document).ready(function() 
{
  $("button").click(function()
{
    $("#first").hide("slow");
    $("#second").show("slow");
});
});

Output:

jQuery Fading Methods

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.

  • $(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>
<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>

$(document).ready(function()
{
$("button").click(function()
{
  $("#first").fadeOut(6000);
  $("#second").fadeIn(6000);
});
});

Output:

jQuery Sliding Methods

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.

  • $(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>
<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>

$(document).ready(function()
{
$("button").click(function()
{
   $("#first").slideUp(6000);
   $("#second").slideDown(6000);
});
});

Output:

jQuery animate() method

The animate() method of jQuery is used to apply custom animations. CSS properties can be used to create their own animations.
$(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>
<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>

$(document).ready(function() 
{
$("button").click(function()
{
 $("#first").animate({width:"100px",height:"100px"},6000,function()
{
    alert(&quot;animate is done !&quot;);
 });
});
});

Output:

Summary

  • 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.