How to read jQuery for beginners

I normally find that if you can “read” a programming language then writing it becomes so much easier. In this article I am going to go over how to read some very basic jQuery programing.

This is how I read the code above:

Line 1: When the document is ready run some jQuery Code.

Line 2: Create a variable called slideState and give it the value of “down”

Line 3: If a Hyperlink is clicked, get ready and run everything inside this section

Line 4: If the variable SlideState is equal to Down (otherwise go to line 7) then I want to

Line 5: To grab anything with an ID of BOX and slide it up over 3 seconds.

Line 6: I Now want to let the browser know that the box is now in the “UP” position

Line 7: If the slideState is Up then I want to run some code instead

Line 8: Grab anything with the ID of Box and Slide the Item down over 3 seconds

Line 9: Reset the slideState variable back to the Down position

This jQuery code would work with this xhtml file

The CSS needed would look something like this:

Read my next article on How to read jQuery for Beginners (Part 2)