Putting our newfound jQuery knowledge to some good use

Ok, so we've learned a few important jQuery fundementals, and some interesting tricks. Now it is time to apply this knowledge to a project we've already worked on: The Farm at Richville site we recently converted to HTML5. Let's put a working slideshow into the site using a custom jQuery plugin we're going to write. 

[click here to take a look at the Farm at Richville site with working slideshow]

[click here to download the exercise files]

[click here to download the tutorial PDF


jQuery Animations

We already used prebuilt jQuery animtaion methods in the last exercise whehter we were aware of it or not. The  .fadeIn() and .fadeOut() methods we used for our slideshow are simple jQuery functions that increase or reduce respectively the CSS opacity property of an element. As we can see, these prebuilt methods are very useful.  But jQuery provides a very useful method for the custom animation of certain CSS properties. A proper implementation of the .animate() method will have the following structure:

$("#some_element").animate( {some_property:value; some_other_property:value;}[, duration] [, easing] [, call back function] );

You can pass any CSS properties with numeric values and animate() will all chnage them together from the selected element's original properties to the new values you choose.  [Click here] to download the following simple examples:

Example 01: Simple animation

This demo simply calls two .animate() methods: 

  1.  $("#clickhere").click(function() {
  2.    $("#animate1").animate({
  3.     height: "20px",
  4.     width: "10px",
  5.    }, 1000);
  6.    $("#animate2").animate({
  7.     height: "50px",
  8.     width: "500px"
  9.    }, 1000);
  10.  });

Example 02: Animating Multiple CSS Properties

[See the demo]. Any CSS property with a numeric value can be animated with jQuery. Font-size, border-width, margin, padding, top, left, bottom, and right can be animated simply by passing the desired end point to jQuery.animate(). These properties can be expressed either as %, px, or in ems:

  1.     $("#clickhere").click(function() {
  2.         $("#animate1").animate({
  3.             height: "20px",
  4.             width: "50%",
  5.             padding: "5em",
  6.             marginLeft: "40px",
  7.             borderWidth: "5px"
  8.         }, 1000);
  9.     });


Example 03: Animation Callback Functions

[See the demo]. The .animate() method can also accept a callback function, to be called when the animation has finished:

  1.     $("#clickhere").click(function() {
  2.         $("#animate1").animate({
  3.             height: "12px",
  4.             width: "50px"
  5.         }, 1000, function() {
  6.             alert('done!');
  7.         });
  8.     });


Example 04: Animation Chaining

[See the demo]. Like any other jQuery method, .animate() can be chained to other animations. Unless otherwise specified, each subsequent call to .animate() will fire only after the previous call in completed.  

  1.    $("#clickhere").click(function() {
  2.     $("#animate1").animate({
  3.      width: "200px"
  4.     }, 600).animate({
  5.      height: "200px"
  6.     }, 600).animate({
  7.      width: "120px",
  8.      height: "120px"
  9.     }, 600).animate({
  10.      marginLeft: "100px",
  11.      borderWidth: "5px"
  12.     }, 600);
  13.    });

Example 05: Easing

[See the demo]. Assuming you include the jQueryUI library into your script, you make use of awesome animation easing properties.

  1.    $("#clickhere").click(function() {
  2.     $("#animate1").animate({
  3.      width: "200px"
  4.     }, 1000, "easeOutSine");
  5.     $("#animate2").animate({
  6.      width: "200px"
  7.     }, 2000, "easeOutExpo");
  8.     $("#animate3").animate({
  9.      width: "200px"
  10.     }, 3000, "easeOutBounce");
  11.    });

Putting Animation to Good Use

I have updated the Farm at Richville site to include a simple popup window when someone clicks on any of the in-content buttons. This is preferable to having them click to another page as it keeps them in the same space.

[Take a look at the demo] [Download the Exercise Files]

Homework: try the .animate() for yourself

Now that you have seen the .animate() function in action, try adding a more involved animation (or series of animations) for the yellow menu button in the Farm at Richville exercise files above. Additionally, you'll notice that, to close the jQuery popup, a user must click outside the rounded rectangle area. It may confuse people if there are no indications that this is how you close the popup. Therefore, attach a close button to the popup div that animates the popup out to the main website.

Here are the two things you need to do:

  1. Add a creative animation of your won the third (yellow) content button in the exercise files above.
  2.  Add a close button to the popup div so that a user knows how to close it down. 

Post the entire site in your own Sites folder and send me a link. This homework is due Wednesday, May 2nd. Contact me with any questions.