We'll learn how to make a simple image slide into show using jQuery. Now, I'm just going to assume you know some basics of HTML5, CSS3, and Javascript. If not - dont worry, I'll explain each step.

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.

1.)We include our tags which is where we'll put our html and JavaScript and css.

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.

syntax:
selector{
property: value;
}

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

Introduction: Using JQuery to Make a Slide Effect