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)