JavaScript & jQuery Video Tutorial

Part 4 - jQuery Effects

The following code is from the Video.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">h2 {background-color: orange;}</style>
</head>

<body>
 <h1>Click Me</h1>
 <h2>Heading two</h2>
 <h3>Heading three</h3>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

hide() Effect

Hides the elements by changing the height, width, and opacity. Example: $("h2").hide(1000) - Click on the top heading element to hide the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").hide(1000);
  });
});

Try it out.

show() Effect

Shows the elements by changing the height, width, and opacity. Example: $("h2").show(1000) - Click on the top heading element to show the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h2").hide();
  
  $("h1").click(function() {
    $("h2").show(1000);
  });
});

Try it out.

toggle() Effect

Alternately shows or hides the elements by changing the height, width, and opacity. Example: $("h2").toggle(1000) - Click on the top heading element to alternately show or hide the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h2").hide();
  
  $("h1").click(function() {
    $("h2").toggle(1000);
  });
});

Try it out.

slideUp() Effect

Hides the elements by changing the height. Example: $("h2").slideUp(1000) - Click on the top heading element to hide the <h2> element over a period of 1 second.

$(document).ready(function() {
  //$("h2").hide();
  
  $("h1").click(function() {
    $("h2").slideUp(1000);
  });
});

Try it out.

slideDown() Effect

Shows the elements by changing the height. Example: $("h2").slideDown(1000) - Click on the top heading element to show the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h2").hide();
  
  $("h1").click(function() {
    $("h2").slideDown(1000);
  });
});

Try it out.

slideToggle() Effect

Alternately shows or hides the elements by changing the height. Example: $("h2").slideToggle(1000) - Click on the top heading element to alternately show or hide the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h2").hide();
  
  $("h1").click(function() {
    $("h2").slideToggle(1000);
  });
});

Try it out.

fadeOut() Effect

Hides the elements by changing the opacity. Example: $("h2").fadeOut(1000) - Click on the top heading element to hide the <h2> element over a period of 1 second.

$(document).ready(function() {
  //$("h2").hide();
  
  $("h1").click(function() {
    $("h2").fadeOut(1000);
  });
});

Try it out.

fadeIn() Effect

Shows the elements by changing the opacity. Example: $("h2").fadeIn(1000) - Click on the top heading element to show the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h2").hide();
  
  $("h1").click(function() {
    $("h2").fadeIn(1000);
  });
});

Try it out.

fadeToggle() Effect

Alternately shows or hides the elements by changing the opacity. Example: $("h2").fadeToggle(1000) - Click on the top heading element to alternately show or hide the <h2> element over a period of 1 second.

$(document).ready(function() {
  $("h2").hide();
  
  $("h1").click(function() {
    $("h2").fadeToggle(1000);
  });
});

Try it out.

fadeTo() Effect

Changes the opacity until the specified opacity is reached. Example: $("h2").fadeTo(1000, 0.3) - Click on the top heading element to change the opacity of the <h2> element to 30% over a period of 1 second.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").fadeTo(1000, 0.3);
  });
});

Try it out.

delay() an Effect

Delays the effect that follows it. Example: $("h2").delay(2000).fadeToggle(1000) - Click on the top heading element to alternately show or hide the <h2> element, over a period of 1 second, after a delay of 2 seconds.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").delay(2000).fadeToggle(1000);
  });
});

Try it out.

Callback Function

The callback function, passed as the second argument to the effect method, will be executed at the completion of the effect. Example: $("h2").hide(1000, function() {$("h3").fadeOut(1000);}); - Click on the top heading element to hide the <h2> element, over a period of 1 second. After the <h2> finishes hiding, the <h3> element will fade out over a period of 1 second.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").hide(1000, function() {
      $("h3").fadeOut(1000);
    });
  });
});