JavaScript & jQuery Video Tutorial

Part 5 - jQuery Animation

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; position: relative;}
 </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>

animate() Font Size

Animates the font size. Example: "font-size": "3em" - Click on the top heading element to change the <h2> element font size.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "3em"
    }, 1000);
  });
});

Try it out.

animate() Width

Animates the width. Example: "width": "50%" - Click on the top heading element to change the <h2> element width.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "3em",
      "width": "50%"
    }, 1000);
  });
});

Try it out.

animate() left property

Animates the left property. Animating the left property will have no effect if the element's position property is set to static. Example: "left": "100px" - Click on the top heading element to change the <h2> element's left property.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "3em",
      "width": "50%",
      "left": "100px"
    }, 1000);
  });
});

Try it out.

animate() left property by incrementing

Increments the left property each time the event is triggered. Animating the left property will have no effect if the element's position property is set to static. Example: "left": "+=100px" - Click on the top heading element to increment the <h2> element's left property. The left property will be incremented each time the heading element is clicked.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "3em",
      "width": "50%",
      "left": "+=100px"
    }, 1000);
  });
});

Try it out.

animate() Font Size using "hide" value

Font size animation can use a value of "hide". Example: "font-size": "hide" - Click on the top heading element to hide the <h2> element by reducing its font size.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "hide",
      "width": "50%",
      "left": "+=100px"
    }, 1000);
  });
});

Try it out.

animate() Font Size using "toggle" value

Font size animation can use a value of "toggle". Example: "font-size": "toggle" - Click on the top heading element to hide the <h2> element by reducing its font size. Click again to show the <2> element by increasing its font size.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "toggle",
      "width": "50%",
      "left": "+=100px"
    }, 1000);
  });
});

Try it out.

Callback Function

The callback function, passed as the third argument to the animate() method, will be executed at the completion of the animation. Example: $("h3").fadeOut(1000); - Click on the top heading element to hide the <h2> element. After the <h2> animation finishes hiding, the <h3> element will fade out over a period of 1 second. Click again to show the <2> element by increasing its font size.

$(document).ready(function() {
  $("h1").click(function() {
    $("h2").animate({
      "font-size": "toggle",
      "width": "50%",
      "left": "+=100px"
    }, 1000, function() {
      $("h3").fadeOut(1000);
    });
  });
});