jQuery Animation Lab - When Pigs Fly
Fork this repo on Github and clone these files onto your local machine. In the repo, there are some basic jQuery events in my_script.js, and a cute image of a pig in pig.html. We will use these files to create some jQuery animation.
Step 1: Animate the Pigs when you Click the Button
Right now the pigs just disappear and reappear. You want them to fade, move, 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.