Today’s goals:

• Review answer code for Monday’s jQuery practice
• Discuss classroom expectations
• Practice with jQuery’s animate API
• For fun- download a free desktop wallpaper from Smashing Magazine for May

 Today’s featured website:

• https://dreamliner.qantas.com/– This airline website won an award for its use of jQuery

 From Monday: jQuery Practice

• Here is the answer code. If something didn’t work for you, you should download this and save it.
• Classroom expectations reminder: you’re in the 4th quarter. Effort is 60% of your grade. When we do class work together like Monday, you’re expected to either follow along with me or move ahead on your own with the instructions provided. I saw too many students not following along and doing other things. Please keep in mind that this affects your grade in a negative way. I also don’t have time to catch you up if you’re not paying attention. You will miss important information and you won’t have accurate code that you can use later for another project. Remember why you’re here, what you’re learning, and the goals you set for yourself in this class.

 jQuery’s Animate API

• Read through each of the following examples and then do the exercises. Clicking a button is only used for the examples. When you do an exercise, you will just focus on the jQuery and the element will move on its on without the click of a button.
• Move something to the right or left
  1. View example
  2. Do exercise. After you get it to move, make the animation last 3 seconds by adding a comma after the curly bracket and adding 3000 before the closing parenthesis.
     Like this: $(selector).animate({params}, 3000);
• Change multiple properties at the same time
  1. View example
  2. Do exercise. Once you get it to work, make the animation last for 4 seconds by adding the same code as the previous example (comma after curly bracket and then the time before the closing parenthesis)
• Create back to back animations
  1. View example 1 and example 2
  2. Do exercise– See if you can also shrink the div’s width to 200px
• Connect animations to events, like clicking or hovering
  1. Go to this example. Change button to div. How can you get the animation to work now? What do you have to do? When you get it to work, change click to hover. How does the animation work now?
• Stop an animation before it’s finished
  1. View example (no exercise)
• When you finish: Go to http://www.tutorialrepublic.com/jquery-examples.php and look at least one example from each of the following categories: Basic, Selectors, Events, Show and Hide Effects, Fading Effects, Sliding Effects, and Animation Effects.