Today’s Goals:

• Practice jQuery: selecting elements and using APIs
• Practice with jQuery’s animate API
• Learn about jQuery events

 Today’s featured website:

• https://nexusstudios.com/– This company produced a very cool interactive video for a Google Doodle today and their webpage is very creative and engaging

 jQuery Practice

1. Review: $(“select something here”).API(“do something here”);. Example: $(“p”).css(“color” , “red”); makes all of your paragraphs red.
2. Let’s add some content to our page to work with. First, add a link to http://jquery.com/ in your body section. Then, add a paragraph and grab some placeholder text from here.
3. Next, let’s add a box to our page. Add some opening and closing style tags in your head section and create a class called .box in your style sheet. Give it height of 250px, a width of 300px, and a background-color of pink. Now, go into your HTML and add div class=”box” and close the div tag.
4. Last week we learned how to do several things with jQuery, including selecting elements and changing the CSS. Let’s begin by selecting the paragraph and drawing a border around it by using jQuery’s CSS API.
5. How could we add a border to the box we created?
6. Let’s now interact with our hyperlink by grabbing some of the sample code from here. What do you think this code will do?
7. We’re going to make this box disappear and then come back again use jQuery’s hide and show APIs. Let’s start with hide. We’re going to select our box and make it hide after a certain amount of time (milliseconds). How can we use the show API to bring the box back after 2 seconds? Let’s also try “fast” and “slow” instead of time in milliseconds.
8. Basic animation part 1: Let’s use slideUp and slideDown and fadeOut and fadeIn. Let’s comment out the hide and show code by adding // before it and make the box slide up and down and also fade out and in by adding new code below.
9. Basic animation part 2: Let’s animate the box by changing its width and height. First, let’s comment out the previous code and add some new code below. Now let’s select the box and then add animate.(). Inside the parenthesis we’ll add {height: “300px”}, 4000, which will change the height of the box from 250px to 300px over 4 seconds. Now let’s change the width and height at the same time. Note: jQuery’s animate API can be used with any NUMERIC CSS property.

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

 jQuery Events

• Like JavaScript, jQuery can do things to the content on your page when someone scrolls, clicks, hovers the mouse, etc.
• First, let’s review jQuery syntax
• Let’s also review jQuery selectors
• Now let’s look at jQuery events
• Practice on your own: download this code, copy and paste it into Notepad++, and save it as jqueryevents.html
• Follow the instructions inside the comments
• 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.