DickinsonMark / g30-jquery-ryu

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Intro to jQuery - the Hadouken

This repo is a boilerplate for running through the jQuery Hadouken exercise. Clone down the master branch, and fill in your jQuery code to complete.

Many thanks to Carl Sednaoui at Thinkful for the great exercise!

Directions

  1. Append the image of Ryu to the DOM. URL:

    http://i.imgur.com/90Mmdcm.png
    
  2. When the user hovers their mouse over the image, replace the Ryu image with the animated GIF of him ready to fight. When they unhover, change back to the original image.

    http://i.imgur.com/nTj3Fxx.gif
    
  3. When the user clicks on Ryu, change the image to the Hadouken stance:

    http://i.imgur.com/Rfj0a80.png
    
  4. Add the Hadouken GIF to the page when Ryu is clicked:

    http://i.imgur.com/oTyQRvX.gif
    
  5. Animate the Hadouken so that it goes across the page from left to right. Look at the jQuery .animate() function.

  6. When the mouse is released, let Ryu relax and stand back up in his original pose:

    http://i.imgur.com/90Mmdcm.png
    
  7. Stretch: If you think the Hadouken must be semi-automatic, figure out where to remove the Hadouken GIF without breaking the rest of the functionality.

About


Languages

Language:JavaScript 69.8%Language:HTML 23.2%Language:CSS 7.0%