Consider caching your element selectors like this:

var $image = $('#my-div img');

This way jQuery doesn't have to traverse the DOM more than once to select the element.

Also, I believe you can do all of your mousedown() event code in one block.

Edit: oops, upon further inspection, I see you are doing this all in the console. Caching the selector is still possible, but now I understand why you did the mousedown() event the way you did.

Hi sparkygoblue, author here, thanks for the feedback! As you mentioned in your edit, I tried to break every step into simple-to-follow pieces.

Def let me know if you have any other suggestions :)

+1 for the share button up top (https://github.com/carrot/share-button) - but adjust that hover color to blue or grey!

</shameless plug>

hahaha, thanks Jeff, I'll change that on the next revision ;)

Nice! I actually used a horrible version of Street Fighter for my Intro to Programming course. We were learning conditionals, so I thought, "Why not teach them character selection and Event listeners?" A little confusing, but kept everyone interested.

That's really interesting. Mind sharing a link to it (if you have one)? Would love to check it out.

No link, but I'll clean it up and email you a copy.

Its hideous, the gif's animation continues to repeat itself because the steps to play a gif once in VB is way too complicated. However, we built an onscreen gamepad so clicking left and right moved the character. It uses 3 BG stages and 3 characters (Ryu, Guile, and Chun-Li). I'll also include a link to where I got the gif's and sound effects.

Awesome, looking forward to it!

Since I figured someone else might like to use it, I added some comments and uploaded a copy to GitHub. Here you go: https://github.com/tsumnia/Visual-Basic-Street-Fighter

Awesome, thank you! Will check it out when I get home tonight.

Thank you! If I can make one suggestion it would be to add somewhat at the end a demo of the final project. The first thing I do with tutorials is always to scroll to the end and see what I am going to end up with.

Thanks for the suggestion 1337biz. If you scroll down to "Your First jQuery Project" you should see the example we're creating in the guide. Let me know if there's anything else.

While I applaud the time the author took to write this, isn't the message a bit misguided? Wouldn't it be more useful to encourage people to "Learn JavaScript and how to read an API"?

Hi hodgesmr, author here. Could you expand a bit more on your comment, would love to hear your suggestions.

I think the tutorial is nice and does a good job demonstrating the power that jQuery offers over plain old JS. But if a newcomer to web dev came across this, it seems to not relay the point of what jQuery is: a JavaScript library. IMO, "learning jQuery" is a rather abstract concept and in the grand scheme, developers would be better off spending time with plain old JavaScript and making themselves familiar with how to read the jQuery API. I know this sounds rather "RTFM" of me, but that's not quite what I'm going for.

Good job on the tutorial. But I hope new-comers will look for JavaScript references for future education.

What is the purpose of the opacity fade at the bottom? Stylistic? I'd really rather be able to see everything clearly. Looks like there is some good content otherwise.

I agree. It's more distracting than it is helpful, perhaps even just allowing more to be visible at a time.

I'm not able to scroll down the page on my iPad - it doesn't seem to hang, I just can't scroll. Any idea why?

Will definitely check it out when I'm on my laptop, seems cool!

Hi Cederfjard, author here, the guide won't work on iPad (or mobile devices) :(

Let me know if you have any problems looking at it from your computer.

Enjoyable read, but that share button was annoyingly as all hell. Easy enough to delete, though, as we were already in the web inspector.

Just wanted to mention that this console is available in Safari as well, presumably a consequence of webkit.

Thanks, author here, the reason I mention to use Chrome is to make sure the screenshots on the guide match what the user sees on their screen.

Ok I see, makes sense. Anyway, nice hands on tutorial, I like it. :) Thanks

Really neat and approachable tutorial with clear goals. Effective instruction is difficult, so good work!

Author here, thanks so much!

while it's a bit of a face dive into jQuery, this is amazing.

Author here, glad you enjoyed it :)

Definitely let me know if you have any feedback or suggestions.

Hey, on Chrome 32.0.1700.19 beta this:

Use the keyboard shortcut Command: Option + J (Mac)

doesnt work, as the shortcut seems to be Option + Alt + J.

Doh! Didn't know they changed it. Thanks for the heads up!

Did the menu access change? Or is it still View > Developer > JavaScript Console.

Nope, that one worked, and this is how I figured out the proper shortcut ;)

cmd + option + i always worked for me on mac. never tried J.