Using JQuery to Make a Slide Effect

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.

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.

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.

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.

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.

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)

Save the document as a html file with .html instead of .txt

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