Lab - When Pigs Fly

There are some basic jQuery events in my_script.js, and a cute image of a pig in pig.html. Open this repo on Github and clone these files onto your local machine.

Step 1: Animate the Pigs when you Click the Button

Right now the pigs just disappear and reappear. You want them to fade, fly and zoom. Add a new button called "Fly" that makes the pig move.

• Check out the animate documentation to get this to happen.
• In CSS, make sure div is styled to have position: absolute

Step 2: Removing the Buttons

Use what you learned about jQuery events to have the pig "fly" when you click on the image themselves, not the button.

Step 3: Add a New Pig

Modify the HTML to add a new pig to the right of your current pig. You might have to play around with the CSS layout properties.

Stretch: Follow the Leader

Create an event where once the first pig flies away, the other one follows automatically after a set period of time.

Reference

W3 Schools jQuery Animation