Introduction: Using JQuery to Make a Slide Effect

Picture of 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.

Step 1: Text Editor

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Comments

About This Instructable

284views

7favorites

License:

Bio: I'm a 14 year old who enjoys programming and physics
More by rsegura:Using jQuery to make a slide effectEASY BATCH FILEDEATH VIRUS
Add instructable to: