-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
480 lines (395 loc) · 29.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<!DOCTYPE html>
<html>
<head>
<title>jQuery Intro: Learn to Use jQuery With This Fun jQuery Training Guide</title>
<link rel="stylesheet" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="main.js"></script>
<!-- Google Fonts Starts -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
<!-- Google Fonts Ends -->
</head>
<body>
<img src="http://www.thinkful.com/static/images/logo-audio.png" class="logo">
<h1>Learning jQuery with Street Fighter and Hadoukens</h1>
<div class="author">
Created by <a href="https://twitter.com/carlsednaoui" target="blank">Carl Sednaoui</a>
<a href="https://github.com/carlsednaoui/intro-to-jquery" target="blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
</div>
<div class="section">
<p>Through this interactive guide you'll gain a basic understanding of jQuery and how to use it on your own projects. You'll learn to select elements, modify them and we'll even get to use some really cool jQuery animations.</p>
<p>To get through this guide you'll need a basic understanding of HTML, CSS and CSS selectors. If you'd like a refresher on these topics you can use <a href="http://learn.shayhowe.com/html-css/terminology-syntax-intro" target="blank">Shay's intro to CSS & HTML</a>.</p>
<p>Disclosure: This guide uses Ryu from Street Fighter and his world-famous Hadoukens. As you can imagine, both Ryu and his Hadoukens are trademarks of <a href="http://www.capcom.com/" target="blank">Capcom</a>.</p>
<p>Ready? Let's dive in!</p>
</div>
<div class="section">
<h2>What is jQuery</h2>
<p>As said on jQuery.com: "jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling..."</p>
<p>Here's another way to put it: jQuery is a powerful JavaScript library that works in all browsers, and enables you to write much less code than you otherwise would with plain JavaScript.</p>
</div>
<h2>Time to Get Our Hands Dirty</h2>
<div class="section">
<p>In this guide we'll be using <a href="https://developers.google.com/chrome-developer-tools/docs/console" target="blank">Google Chrome's console</a>. Yes, you can use any browser you like but I strongly recommend you switch to Chrome to follow along. If you don't have Chrome, you can <a href="https://www.google.com/intl/en/chrome/browser/" target="blank">download it here</a>.</p>
<h3>Opening Chrome's Console</h3>
<p>Google Chrome gives you access to this thing called the "console". The console allows you to write JavaScript (and, in our case, jQuery) and see the results right away. Here's how to open the console:</p>
<ul>
<li>Use the keyboard shortcut Command: Option + J (Mac) or Control + Shift + J (Windows/Linux).</li>
<li>You can also go to View > Developer > JavaScript Console.</li>
</ul>
<p>Here's what your console should look like (you may or may not have error messages, don't worry about those).</p>
<image src="images/chrome-console-1.png" class="screenshot" />
</div>
<div class="section">
<h3>Selecting an Element with jQuery</h3>
<p>To select the green box below, simply type this in your console then press "enter": (yes yes, you need to follow along)</p>
<pre id="stop-green-top"><code>$('#green-box')</code></pre>
</div>
<div id="green-box-container">
<div id="green-box"></div>
</div>
<div class="section pulled">
<p>Here's what just happened:</p>
<ul>
<li><span class="code-review">$</span> The dollar sign is how we use jQuery, which has already been loaded in this guide for you.</li>
<li><span class="code-review">('#green-box')</span> This is how we select an element with an ID of 'green-box'. Here's a good <a href="http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/" target="blank">CSS Selector</a> refresher, in case you need it.</li>
</ul>
<p>You should see something like this, meaning that the element we're selecting is a <div> with an ID of 'green-box'.</p>
<image src="images/green-box-1.png" class="screenshot" />
</div>
<div class="section pulled">
<h3>Using the jQuery API</h3>
<p>Side note: In the context of jQuery, the API is simply a list of all the things you can do with jQuery. Here's a link to the <a href="http://api.jquery.com/" target="blank">full API</a>.</p>
<p>Now that you know how to select an element, let's go ahead and change the color of our square. How about a nice <a href="http://www.cssportal.com/css3-color-names/" target="blank">LightSkyBlue</a> color? (That's the name of the CSS color.) In order to do this we will use <a href="http://api.jquery.com/css/" target="blank">jQuery's CSS API</a>. Here's what you need to type:</p>
<pre><code>$('#green-box').css('background-color','lightskyblue')</code></pre>
<p>Can you guess what just happened?</p>
<ul>
<li><span class="code-review">$('#green-box')</span> We selected an element with an ID of 'green-box'.</li>
<li><span class="code-review">.css(</span> We used jQuery's CSS API.</li>
<li><span class="code-review">'background-color','lightskyblue' </span> We changed the background-color CSS property of this element to a lightskyblue color.</li>
</ul>
<p class="protip">Protip: You can use the "up" arrow in your console to get the last command you typed. This will save you tons of time.</p>
<p class="protip">Protip dos: Even though you can copy/ paste the sample code provided, I strongly suggest you actually type things out. This will help you learn wayyy more. I Promise.</p>
<p>Let's now change the border color to a nice <a href="http://www.supernaturalwiki.com/images/1/15/Zoolander.jpg" target="blank">steelblue</a> color. Can you guess how to do this?</p>
<pre><code>$('#green-box').css('border-color','steelblue')</code></pre>
<p>We basically used the same command as above, but instead of changing the background-color we changed the border-color.</p>
<p>Actually, how about we remove the background color altogether by setting it to 'transparent'?</p>
<pre><code>$('#green-box').css('background-color','transparent')</code></pre>
<p>Are you getting the hang of it? See, not as hard as you thought :)</p>
<p>Ready for something amazing? Let's add a hadouken inside our transparent box.</p>
<p>We have a hadouken image conveniently saved at <a href="http://i.imgur.com/8NArGWZ.gif" target="blank">http://i.imgur.com/8NArGWZ.gif</a>. To add this image to our box we'll use an <a href="http://htmldog.com/reference/htmltags/img/" target="blank">HTML image tag</a> to create the image and use <a href="http://api.jquery.com/html/" target="blank">jQuery's HTML API</a> to add the image.</p>
<p>Here's how to do this (feel free to just copy/ paste image URLs):</p>
<pre><code>$('#green-box').html('<img src="http://i.imgur.com/8NArGWZ.gif" />')</code></pre>
<p>Note: Notice that both the class and the src are using double quotes "", that's because <a href="http://en.wikipedia.org/wiki/Nested_quotation#In_JavaScript_programming" target="blank">we're nesting them</a>.</p>
<p>Another way to add the hadouken would be to use <a href="http://api.jquery.com/append/" target="blank">jQuery's Append API</a>.</p>
<pre><code>$('#green-box').append('<img src="http://i.imgur.com/8NArGWZ.gif" />')</code></pre>
<p><b>Extra credit:</b> Can you guess what happens if you run the 'append' command several times? Now try running the 'html' one several times. I'll let you play with this for a minute...</p>
<p class="protip">Protip: Remember that you can use the "up" arrow in your console to go back to a previous command.</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>Were you able to spot the difference? If you're about to say that the 'append' command keeps on appending hadoukens forever while the 'html' command replaces everything with only 1 hadouken you'd be 100% right!</p>
<div class="summary">
<p>Here's what you learned in this section:</p>
<ul>
<li>How to select an element with jQuery.</li>
<li>How to use jQuery's CSS API to change the background and border color of an HTML element.</li>
<li>How to change the HTML content of an element.</li>
<li>How to append HTML to an element.</li>
</ul>
</div>
</div>
<div class="section">
<h2 id="stop-green-bottom">Your First jQuery Project</h2>
<p>You now have a basic understanding of jQuery. How about we deepen your jQuery chops by working on a small project together? Here's what I propose: Let's make <a href="https://www.google.com/search?q=ryu+hadouken&tbm=isch" target="blank">Ryu fire a hadouken</a>.</p>
<p>This is what our end project will look like. (Make sure you hover on Ryu and also click on him :)</p>
<div id="main-example-container" style="width:960px;">
<img id="main-example" src="images/ryu_stand_still.png">
</div>
<div id="main-example-add-sound">Add Hadouken sound</div>
</div>
<div class="section">
<h2>Getting Started with Our Project</h2>
<p>Here's what we need to achieve this project:</p>
<ul>
<li>Our 4 images. Including: Ryu at a stand still, Ryu animated, Ryu in the Hadouken position and our famous Hadouken.</li>
<li>An empty <div> which we'll be working from.</li>
</ul>
<p>Luckily for you, I've created an empty <div> below with an ID of 'my-div' (pardon the lack of originality). You already know how to select this div, don't know? Here's the code just in case:</p>
<pre><code>$('#my-div')</code></pre>
<p>You should see this in your console:</p>
<img src="images/code-along-1.png" class="screenshot">
<h3>Adding Ryu at a Stand Still</h3>
<p>Now that we know we can select our <div>, let's add Ryu at a stand still. The image you need is available here: <a href="http://i.imgur.com/90Mmdcm.png" target="blank">http://i.imgur.com/90Mmdcm.png</a></p>
<pre><code id="stop-div-container-top">$('#my-div').append('<img src="http://i.imgur.com/90Mmdcm.png">')</code></pre>
</div>
<div id="my-div-container">
<div id="my-div"></div>
</div>
<div class="section pulled">
<img src="images/code-along-2.png" class="screenshot">
<p>Side note: You'll notice that our last line of code has a little "▶". This means that there's more details hidden. If you click on that icon you should see the <div> expand, which will reveal our newly added image:</p>
<img src="images/code-along-3.png" class="screenshot">
<h3>Adding our Animated Ryu</h3>
<p>When a user hover's over Ryu, we want to animate him as if he was ready to fight. Here is the gif we'll need: <a href="http://i.imgur.com/nTj3Fxx.gif" target="blank">http://i.imgur.com/nTj3Fxx.gif</a>. To achieve this we'll use <a href="http://api.jquery.com/hover/" target="blank">jQuery's Hover API</a>, which can take 1 or 2 functions. Functions you say? What is THAT? Well... a function is basically a block of code (or logic) you want to execute.</p>
<p>Just a second ago I mentioned that <a href="http://api.jquery.com/hover/" target="blank">jQuery's Hover API</a> can take 1 or 2 functions here's the difference:</p>
<ul>
<li>If you use 1 function, this function will run when a user hovers over the element. That's it.</li>
<li>If you use 2 functions, the 1st function will run when the user hovers over the element and the 2nd function will run when the user "un-hovers" (or stops hovering) over the element.</li>
</ul>
<p>In our example, now we'll need to use 2 functions. The first function will change Ryu from a stand still position to an animated one when somebody hovers over him. The second function (which will run when the user stops hovering over the image) will change Ryu from an animated position back to a stand still one.</p>
<p>Below's the code you need to run.</p>
<p>Quick note: Since you're using your console, it's easier to type all this code in one long line. But, if you prefer to use several lines, you can also hit "option" + "enter" on a Mac to get a new line. Once you're done typing everything hit "enter".</p>
<pre><code>$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})</code></pre>
<p>If your code doesn't work, don't panic. Make sure to pay close attention to the syntax, it's really easy to make typos. Also, I've included a checkpoint a few scrolls down.</p>
<p>Let's go over what's happening in the above block of code.</p>
<ul>
<li><span class="code-review">$('#my-div img')</span> First, we select the image that is INSIDE #my-div.</li>
<li><span class="code-review">.hover(</span> Then we use jQuery's hover API.</li>
<li><span class="code-review">function() { this.src = 'http://i.imgur.com/TYvGQPJ.gif' }</span> We then pass our first function. All this is saying is that we'll change the source (or, as said in HTML, the 'src') for 'this' element. The 'this' here refers to the image inside our <div>, which we selected 2 steps ago.</li>
<li><span class="code-review">,</span> Is used to separate our functions.</li>
<li><span class="code-review">function() { this.src = 'http://i.imgur.com/JFMYx3j.png' }</span> Finally, we pass our second function which does the same thing as our previous function but with a different image.</li>
</ul>
<p>If you hover over Ryu now he should start jumping up and down.</p>
<p class="checkpoint">Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.</p>
<pre><code>$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
</code></pre>
<p class="protip">Protip: If you typed the wrong command and don't know how to undo what you did, you can simply refresh this page and start from any of the checkpoints provided.</p>
<p>Side note: It's totally ok to feel slightly confused right now. If you keep reading this guide you'll get the hang of it. We still have a bit more to do, giving us plenty of time to practice. Here's what coming next:</p>
<ul>
<li>Adding the Hadouken pose when a user clicks on Ryu.</li>
<li>Adding the Hadouken next to Ryu.</li>
<li>Making the Hadouken move.</li>
<li>Getting Ryu out of the Hadouken pose.</li>
<li>Removing the Hadouken once it's done moving.</li>
</ul>
<h3>The Hadouken Pose</h3>
<p>We now want to change Ryu's pose when someone clicks on him. To do this we'll use <a href="http://api.jquery.com/mousedown/" target="blank">jQuery's Mousedown API</a>. Mousedown only takes 1 function which gets triggered whenever somebody clicks on the desired element. Here's how to use it:</p>
<pre><code>$('#my-div img').mousedown( function() {
this.src = 'http://i.imgur.com/Rfj0a80.png'
})</code></pre>
<p>And here's what's happening:</p>
<ul>
<li><span class="code-review">$('#my-div img')</span> First, we select the image that is inside #my-div.</li>
<li><span class="code-review">.mousedown(</span> Then use jQuery's Mousedown API.</li>
<li><span class="code-review">function() { this.src = 'http://i.imgur.com/Rfj0a80.png' }</span> We then pass our function. This function will change the src of the image on mousedown (you may notice that this is VERY similar to what we did earlier).
</ul>
<p class="checkpoint">Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.</p>
<pre><code>$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
this.src = 'http://i.imgur.com/Rfj0a80.png'
})
</code></pre>
<h3>Adding The Hadouken</h3>
<p>Let's add the Hadouken, which is available at <a href="http://i.imgur.com/oTyQRvX.gif" target="blank">http://i.imgur.com/oTyQRvX.gif</a>.</p>
<p>This will be similar to what we did above, but instead of changing the source of an image we will be appending an element next to Ryu. The element we're appending is an image, with a class of 'demo-hadouken'. Adding this class ensures that the Hadouken is aligned with Ryu's hands (I've taken care of the CSS for you).</p>
<pre><code>$('#my-div img').mousedown(function() {
$('#my-div').append(
'<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
);
})</code></pre>
<p class="protip">Protip: This is the second mousedown event we're adding to '#my-div img'. These events will run in the order in which they were added.</p>
<p>And here's what's happening:</p>
<ul>
<li><span class="code-review">$('#my-div img')</span> First, we select the image that is inside #my-div.</li>
<li><span class="code-review">.mousedown(</span> Then use jQuery's Mousedown API.</li>
<li><span class="code-review">function() {</span> We then begin writing our function.</li>
<li><span class="code-review">$('#my-div').append(</span> When our function runs we're going to select #my-div and append something to it.</li>
<li><span class="code-review">'<img class='demo-hadouken' src="http://i.imgur.com/oTyQRvX.gif">'</span> That something happens to be an image with a class of "demo-hadouken" and a src of "http://i.imgur.com/oTyQRvX.gif".</li>
<li><span class="code-review">);</span> We then close our append function.</li>
<li><span class="code-review">})</span> We then close our mousedown function.</li>
</ul>
<p class="checkpoint">Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.</p>
<pre><code>$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').mousedown(function() {
$('#my-div').append(
'<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
);
})
</code></pre>
<h3>Animating The Hadouken</h3>
<p>It's that moment we've all been waiting for... time to make the Hadouken move! For this we'll use <a href="http://api.jquery.com/animate/" target="blank">jQuery's Animate API</a>.</p>
<pre><code>$('#my-div img').mousedown(function() {
$('.demo-hadouken').animate( {
"margin-left": "600px"
}, 1000, 'swing', function() {
this.remove();
})
})</code></pre>
<p>And here's what's happening:</p>
<ul>
<li><span class="code-review">$('#my-div img')</span> First, we select the image that is inside #my-div.</li>
<li><span class="code-review">.mousedown(</span> Then use jQuery's Mousedown API.</li>
<li><span class="code-review">function() {</span> We then begin our function.</li>
<li><span class="code-review">$('.demo-hadouken').animate(</span> Our function selects an element with a Class of 'demo-hadouken' and uses jQuery's animate API.</li>
<li><span class="code-review">{ "margin-left": "600px" }, 1000, 'swing'</span> jQuery animate takes a few parameters: the CSS properties we want to change, a time duration (in miliseconds) and the CSS transition type. In this case we're adding 600px of margin on the left over the course of 1000 milisecond (1 second) and we're using the 'swing' transition, which is the default transition.</li>
<li><span class="code-review">, function() { this.remove();</span> We then fire a function once the animation has been completed. This function selects 'this' element (referring to the demo-hadouken) and removes it.</li>
<li><span class="code-review">})</span> We then close our above function.</li>
<li><span class="code-review">})</span> Finally we close our Mousedown function.</li>
</ul>
<p class="checkpoint">Checkpoint: Here's all the code we've entered so far. Feel free to copy/ paste this in your console if you get stuck or need to refresh the page.</p>
<pre><code>$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').mousedown(function() {
$('#my-div').append(
'<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
);
})
$('#my-div img').mousedown(function() {
$('.demo-hadouken').animate( {
"margin-left": "600px"
}, 1000, 'swing', function() {
this.remove();
})
})
</code></pre>
<h3>Getting Ryu Out of The Hadouken Pose</h3>
<p>We're almost done! The last thing we'll want to do is make sure that Ryu goes back into his fighting pose after firing the Hadouken. For this we'll use <a href="http://api.jquery.com/mouseup/" target="blank">jQuery's Mouseup API</a>.</p>
<pre><code>$('#my-div img').mouseup(function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})</code></pre>
<p>And here's what's happening:</p>
<ul>
<li><span class="code-review">$('#my-div img')</span> First, we select the image that is inside #my-div.</li>
<li><span class="code-review">.mouseup(</span> Then use jQuery's Mouseup API.</li>
<li><span class="code-review">function() { this.src = 'http://i.imgur.com/90Mmdcm.png' }</span> We then pass our function. This function will change the src of the image on mouseup (you may notice that this is VERY similar to what we did earlier).</li>
</ul>
<p class="checkpoint">Final checkpoint: Here's all the code we've written!</p>
<pre><code>$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').mousedown(function() {
$('#my-div').append(
'<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
);
})
$('#my-div img').mousedown(function() {
$('.demo-hadouken').animate( {
"margin-left": "600px"
}, 1000, 'swing', function() {
this.remove();
})
})
$('#my-div img').mouseup(function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
</code></pre>
<h3>Extra Credit</h3>
<p>If you click on Ryu 100 times really fast you'll notice that Hadoukens start firing everywhere. While this looks really cool, this is an unintended effect which is happening because we're not removing existing Hadoukens before adding new ones. To fix this we need to enter the code below BEFORE we fire new Hadoukens.</p>
<p>Note: Just adding the code below will make Ryu STOP firing Hadoukens. That's because our events are in the WRONG order. Take a look at the following section, where everything is happening in the right order.</p>
<pre><code>$('#my-div img').mousedown(function() {
$('.demo-hadouken').remove();
})</code></pre>
<h3>The Full Code</h3>
<pre><code>$('#my-div').html('<img src="http://i.imgur.com/90Mmdcm.png">')
$('#my-div img').hover( function() {
this.src = 'http://i.imgur.com/nTj3Fxx.gif'
}, function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
$('#my-div img').mousedown( function() {
this.src = 'http://i.imgur.com/Rfj0a80.png'
})
$('#my-div img').mousedown(function() {
$('.demo-hadouken').remove();
})
$('#my-div img').mousedown(function() {
$('#my-div').append(
'<img class="demo-hadouken" src="http://i.imgur.com/oTyQRvX.gif">'
);
})
$('#my-div img').mousedown(function() {
$('.demo-hadouken').animate( {
"margin-left": "600px"
}, 1000, 'swing', function() {
this.remove();
})
})
$('#my-div img').mouseup(function() {
this.src = 'http://i.imgur.com/90Mmdcm.png'
})
</code></pre>
</div>
<div id="stop-div-container-bottom"></div>
<div class="section">
<p>Thank you so much for reading this guide, I hope you had as much fun as I did. If you want to add the Hadouken sound feel free to dive into <a href="http://www.thinkful.com/learn/html5-audio-tag-tutorial" target="blank">Thinkful's HTML5 Audio Guide</a>.</p>
</div>
<div class="appendix">
<div class="section">
<h2>Appendix</h2>
<h3>How to install jQuery?</h3>
<p>The easiest way to install jQuery is to grab the code from <a href="https://developers.google.com/speed/libraries/devguide#jquery" target="blank">Google</a>. Here is the code snippet:</p>
<pre><code><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></code></pre>
<p>Note: Notice that there's no "http:" or "https:" before the "//" in the src of the tag. This ensures that both HTTP and HTTPS pages can load this code. If you're coding locally on your computer you'll need to add "http:" to the beginning of the src to make sure jQuery loads. Here's what your script should look like:</p>
<pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></code></pre>
<p>You can now create a basic html file and add the jQuery script inside the <head> tag. In the example below we also added a JavaScript file called 'example.js', this is where we would hypothetically write our jQuery code.</p>
<pre><code><html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="example.js"></script>
</head>
<body>
<!-- Your content goes here -->
</body>
</html></code></pre>
<p>Note: You'll want to make sure to only use jQuery once your DOM is ready. Don't worry if this sounds abstract and confusing, <a href="http://learn.jquery.com/using-jquery-core/document-ready/" target="blank">here's an explanation and how to achieve this</a>.</p>
</div>
</div>
<div class="author author-left">
Author: <a href="https://plus.google.com/+CarlSednaoui?rel=author" target="blank" rel="author">Carl Sednaoui</a>
</div>
<div class="skrollr-padding"></div>
<div class="hidden">
<img src="images/ryu_animated.gif" />
<img src="images/ryu_hadoken_pose.png" />
<img src="images/hadouken.gif" />
<img src="images/ryu_stand_still.png" />
<img src="http://i.imgur.com/90Mmdcm.png" />
<img src="http://i.imgur.com/nTj3Fxx.gif" />
<img src="http://i.imgur.com/Rfj0a80.png" />
<img src="http://i.imgur.com/oTyQRvX.gif" />
</div>
<audio id="hadouken-sound" src="hadouken.mp3">
<!-- Syntax Highlighting Starts -->
<link rel="stylesheet" href="syntax-highlighting/tomorrow-night.css">
<script src="syntax-highlighting/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Syntax Highlighting Ends -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
</body>
</html>