Introduction: Using JQuery to Make a Slide Effect
Step 1: Text Editor
First, open up any type of text editor, or better yet, use web development software if you have it. Just name the document as shown.
Step 2: Adding Some HTML
So, before we go any further, lets take a look at what we're doing here.
2.)We include our content from a content delivery network; in our case, google.
The tag basically tells you its job.
Step 3: Adding in Our Image and Html Code
Alright, so lets talk about what we did:
1.)We include our
tags which is where our image will seem to apear from.
2.)We then include our image - here i use the link from my example, however you could use any image you want; be creative.
Step 4: Include Our Style
Here we include our CSS3 between the tags. CSS - Cascading Style Sheets. Things done:
1.)We change the background of the page's body to dim gray.
Using this syntax, looking at the code between the tags should become easier.
Step 5: Include Our Script
We finally add our jQuery! :D We put it between new
tags. Here are some steps:
1.)We select our tag with the id of 'flip' and add the click() function to it.
2.)We get our image with the id of 'jumbotron' and add the slideToggle() function with a parameter of 1000 - 1000 milliseconds (1 second delay)
Step 6: Save
Save the document as a html file with .html instead of .txt
Step 7: Future Edits
You should definitely edit the jQuery and the style of the page :) make it your own and show off your skill. Also use this for your own applications :D
We have a be nice policy.
Please be positive and constructive.