Sie sind auf Seite 1von 109

jQuery Air

- FIRST FLIGHT -

Fuel Up
- Foundations for jQuery -

Back in 1995
JavaScript is Born

VBScript Mocha LiveScript JAVAscript

LEVEL 1

Foundations for jQuery

Ja ascript Today v
Explosive Growth

LEVEL 1

Foundations for jQuery

Why jQuery?
An Abstraction Layer

Use jQuery because... ...its easy! ...browsers suck! ...users have old browsers!
LEVEL 1

Foundations for jQuery

JQUERY IS NOT PERFECT


Right Tool for the Job

You still need JavaScript jQuery is heavy & slow! Build now, perfect later.

LEVEL 1

Foundations for jQuery

Just Enough Ja ascript v


- THE BASICS -

Creating V ariables
Giving Names to Data
var message = Hello, World!;

var keyword Name for the variable, normally in snake_case Data or function on the right side Line ends in semicolon
Foundations for jQuery

LEVEL 1

VARIABLES AND DATA


JavaScript Types are Dynamic
var alpha = 42;

var bravo = Fifty Two;

var charlie = 5.2;

var delta = true;

LEVEL 1

Foundations for jQuery

JS Global FUNCTIONS
Alert
alert(Hello, World!);

Pop up a message box with the Parameter Text and an OK button

LEVEL 1

Foundations for jQuery

JS Global FUNCTIONS
Con rm
var answer = confirm(Start Engines?);

Confirmation dialog with the message, returns true or false

LEVEL 1

Foundations for jQuery

JS Global FUNCTIONS
Prompt
var count = prompt(Passenger Count:);

Take in data from the user, returns the v alue they enter as a String

LEVEL 1

Foundations for jQuery

Object Functions
Use Dot Notation and Parentheses
First Flight; Flight.toLowerCase();

first flight

First Flight.toLowerCase;

function toLowerCase() {[native code]}

LEVEL 1

Foundations for jQuery

A Few String Functions


Hello, World!.toLowerCase(); Hello, World!.toUpperCase(); Hello, World!.charAt(7); Hello!.replace(!,World!); Hello, World!.split(, ); hello, world! HELLO, WORLD! W HelloWorld! [Hello,World!]

LEVEL 1

Foundations for jQuery

Number-related Operations
16 + 26; 16 / 2; parseInt(42 people); 42.toString(); 42 8 42 42

LEVEL 1

Foundations for jQuery

ARRAYS
Ordered Sets of Data
var x = [zero,one,two]; x[2]; x.length; x.reverse();

Create an array in v ariable X


two

Returns postion 2 Returns array length Returns reversed list

3 [two,one,zero]

LEVEL 1

Foundations for jQuery

https://developer.mozilla.org/en/JavaScript/Reference/

T ake OFF
- WRITING YOUR FIRST JQUERY -

http://jquery.com

Fastest

Human Readable

http://docs.jquery.com/Downloading_jQuery

MINIFIED Ja ascript v
Better Performance, Sacri cing Readability
function sum(input_1, input_2) { return input_1 + input_2; } sum(16, 32);

75 Characters

function s(i,j){return i+j;} s(16,32);

38 Characters

LEVEL 2

Writing Your First jQuery

LOADING JQUERY
Local File System
<script type="text/javascript" src="jquery.js"></script>

LEVEL 2

Writing Your First jQuery

LOADING JQUERY
Googles Content Delivery Network
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>

LEVEL 2

Writing Your First jQuery

LOADING JQUERY
During This Tutorial

Use the evaluator window Weve already loaded jQuery Your code will run in a safe sandbox

LEVEL 2

Writing Your First jQuery

KICK THE TIRES


Is jQuery Loaded?
jQuery;

jQuery is not loaded!


ReferenceError: jQuery is not defined

jQuery;

Ready to go!
function (j,s){return new b.fn.init(j,s)}

$;

Still jQuery!
function (j,s){return new b.fn.init(j,s)}

LEVEL 2

Writing Your First jQuery

Take Off
Part 1: Elementary Selectors

The DOM
Document Object Model
<html> <head> <title>jQuery First Flight</title> </head> <body> <h1>Welcome to jQuery Air!</h1> <p class=plan> Before you can takeoff... </p> <p id=final> Before Landing </p> </body> </html>

LEVEL 2

Writing Your First jQuery

The DOM
Document Object Model
html head title body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing... jQuery First Flight

LEVEL 2

Writing Your First jQuery

jQuery Selection
JQUERY
$(h1);

Element Name

DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...

LEVEL 2

Writing Your First jQuery

jQuery Selection
JQUERY
$(p);

Element Name

DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...

LEVEL 2

Writing Your First jQuery

jQuery Selection
JQUERY
$(p.plan);

Element + . + class Name

DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...

LEVEL 2

Writing Your First jQuery

jQuery Selection
JQUERY
$(p#final);

Element + # + ID Name

DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...

LEVEL 2

Writing Your First jQuery

Take Off
Part 2: Selection Results

Selection Results
JQUERY
$(p);

DOM
p.plan p#final Before you can takeoff... Then, before landing...

Ja ascript Results v
[<p class=plan>Before you can takeoff...</p>, <p class=final>Then, before landing...</p>]

LEVEL 2

Writing Your First jQuery

Non-match Results
JQUERY
$(h2);

DOM
There were no H2s in the DOM

Ja ascript Results v
[]

Watch out, Im truthy


LEVEL 2

Writing Your First jQuery

Selection Results
JQUERY
$(h1, p.plan);

This wont work!


$(h1,p.plan);

DOM
h1 p#final Welcome to jQuery Air Then, before landing...

Ja ascript Results v
[<h1>Welcome to jQuery Air</h1>, <p class=final>Then, before landing...</p>]

LEVEL 2

Writing Your First jQuery

Understanding Whitespace
JQUERY
$(p#final);

This matches paragraphs with ID final

DOM
document body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...

LEVEL 2

Writing Your First jQuery

Understanding Whitespace
JQUERY
$(p #final);

This matches any element with class final within a paragraph

DOM
document body h1 p.plan p#final

No Match in this Dom


Welcome to jQuery Air Before you can takeoff... Then, before landing...

LEVEL 2

Writing Your First jQuery

The Art of Selecting


$(#final); $(.errors);

Dont use anonymous Class/ID Selectors

$(p#final); $(h3.errors); $(h3.errors, p.errors);

Do use Class/ID with ELEMENT TYPES Even with Multiple Elements

LEVEL 2

Writing Your First jQuery

Take Off
Part 3: Pseudo-Classes and Direct Descendants

PSEUDO-Classes
JQUERY
$(p:first);

This is not the same!


$(p.first);

DOM
body p.plan p#final Before you can takeoff... Then, before landing...

Ja ascript Results v
[<p class=plan>Before you can takeoff</p>]

LEVEL 2

Writing Your First jQuery

Direct Descendants
JQUERY
$(body span);

Any span within body

DOM
body p.plan Before you can takeoff... span.highlight p span WARNING

Then, before landing... seatbelt

LEVEL 2

Writing Your First jQuery

Direct Descendants
JQUERY
$(body > span);

Only spans directly under body

DOM
body p.plan

No Matches
Before you can takeoff... span.highlight p span WARNING

Then, before landing... seatbelt

LEVEL 2

Writing Your First jQuery

Direct Descendants
JQUERY
$(p.plan > span);

Only spans directly under Plan

DOM
body p.plan Before you can takeoff... span span.highlight p span WARNING

Then, before landing... seatbelt

LEVEL 2

Writing Your First jQuery

View from 30,000 Feet


- MANIPULATING STYLE -

Querying CSS
$(p).css; $(p).css(); $(p).css(font-size);

function(a,c){if(arguments... TypeError: Cannot call method 16px

html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 3

VIEW FROM 30,000 FEET

SETTING CSS Explicitly


JQUERY
$(p).css(font-size); $(p).css(font-size,24px);

16px [<p>...

Rendered DOM Welcome to jQuery Air!


p.plan p#final Before you can takeoff... Before you can takeoff... Then, before landing... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

SETTING CSS Relatively


JQUERY
var original = $(p).css(font-size); $(p).css(font-size, original + 8 );

16px [<p>...
No actual change!

Rendered DOM

Doesnt work because of string

Welcome to jQuery Air!


p.plan p#final Before you can takeoff... Before you can takeoff... Then, before landing... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

SETTING CSS Relatively


JQUERY
var original = parseInt($(p).css(font-size)); $(p).css(font-size, original + 8 + px);

16 16px [<p>...

Rendered DOM

Works!

Welcome to jQuery Air!


p.plan p#final

Before you can takeoff... Then, before landing...


VIEW FROM 30,000 FEET

LEVEL 3

Setting Multiple Attributes


Using Method Chaining
$(p).css(font-size,24px). css(font-weight,bold). css(line-height,32px);

Using a Map
$(p).css({font-size:24px, font-weight:bold, line-height:32px});

LEVEL 3

VIEW FROM 30,000 FEET

Ja ascript Maps v
Just Enough JavaScript
{ font-size:24px, font-weight:bold, line-height:32px }

Wrapped in {} Pairs are one key and one value Key and value separated by : Pairs separated by ,
LEVEL 3

VIEW FROM 30,000 FEET

Wait, Wait, w ait!


HTML
content presentation

CSS

JavaScript
interaction

LEVEL 3

VIEW FROM 30,000 FEET

The CSS Interface


DOM and CSS communicate via IDs and Classes Use .css() with reservation Manipulate IDs and Classes More reliable and maintainable

LEVEL 3

VIEW FROM 30,000 FEET

Querying CSS Class


JQUERY
$(p:first).hasClass(plan);

true

Rendered DOM Welcome to jQuery Air!


p:first Before you can takeoff... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

ADDING A CSS Class


JQUERY
$(p:first).addClass(bigger);

[<p class="plan bigger"> Before you can takeoff...</p>]

Rendered DOM Welcome to jQuery Air!


p:first Before you can takeoff... Before you can takeoff... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

REMOVING A CSS Class


JQUERY
$(p:first).removeClass(bigger);

[<p class="plan"> Before you can takeoff...</p>]

Rendered DOM Welcome to jQuery Air!


p:first Before you can takeoff... Before you can takeoff... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

REMOVING All CSS Classes


JQUERY
$(p:first).removeClass();

[<p class=""> Before you can takeoff...</p>]

Rendered DOM Welcome to jQuery Air!


p:first Before you can takeoff... Before you can takeoff... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

Toggling a Class
JQUERY
$(p:first).toggleClass(bigger);

[<p class="plan bigger"> Before class="plan"> Before you you can takeoff...</p>] can takeoff...</p>]

Rendered DOM Welcome to jQuery Air!


p:first Before you can takeoff... Before you can takeoff... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

Visibility
JQUERY
$(p:first).hide();
[<p style=display:none> Before you can takeoff...</p>]

$(p:first).show();

[<p style=display:normal> Before you can takeoff...</p>]

Rendered DOM Welcome to jQuery Air!


p:first Before you can takeoff... Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

Visibility
JQUERY
$(p:first) .toggle();

Switche

s betwee

n show a

nd hide

[<p>style=display:none> [<p Before you can takeoff...</p>]takeoff...</p>] Before you can

Rendered DOM Welcome to jQuery Air!


p:first Then, before landing...

LEVEL 3

VIEW FROM 30,000 FEET

Timing Matters
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(p:first).hide(); </script> </head> <body> <h1>Welcome to jQuery Air!</h1> <p class=plan> Before you can takeoff... </p> <p id=final> Before Landing </p> </body> </html>

No Paragraphs Found! JS already executed!

LEVEL 3

VIEW FROM 30,000 FEET

Timing Matters
<html> <html> <head> <head> <title>jQuery First Flight</title> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <script type="text/javascript"> $(document).ready(function(){ $(p:first).hide(); $(p:first).hide(); </script> }); </head> </script> <body> </head> <h1>Welcome to jQuery Air!</h1> <p <body>class=plan> Before you jQuery Air!</h1> <h1>Welcome tocan takeoff... </p> style=display:none> <p class=plan> <p id=final> takeoff... Before you can Before Landing </p> </p> <p id=final> </body> Before Landing </html> </p> </body> </html>

Waiting for the DOM...

DOM is Ready: re the JavaScript!


LEVEL 3

VIEW FROM 30,000 FEET

CONTENTS MA SHIFT Y
- MANIPULATING CONTENT -

WHY (NOT) Manipulate the DoM


Dividing Responsibilities

HTML
content

presentation

CSS

JavaScript
interaction

LEVEL 4

CONTENTS MAY SHIFT

Flight manifest
Our Sample HTML
body h1 p#time

DOM
Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:

Manifest for Flight #1337


Time: 10:36AM Gate 26

BROWSER

LEVEL 4

CONTENTS MAY SHIFT

Retrieving Text Content


Querying with .text()
body h1 p#time

DOM
Manifest for Flight #1337 span.label span.label 10:36AM p.gate Gate 26 Time:

JQUERY
$(p#time span.label).text(); Time:
LEVEL 4

CONTENTS MAY SHIFT

Setting Text Content


Manifest for Flight #1337
Time: 10:36AM Gate 26

BROWSER

LEVEL 4

CONTENTS MAY SHIFT

Setting Text Content


Manifest for Flight #1337
Departs At: 10:36AM Gate 26

BROWSER

p#time

span.label 10:36AM

Departs At: Time:

DOM

$(p#time span.label) .text(Departs At:); [<span class="label">Departs At:</span>]

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Text is just text


p#time span.label 10:36AM Departs At:

DOM

$(p#time).text(); Departs At: 10:36AM

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Text() With HTML


p#time &lt;b&gt;Departs At:&lt;/b&gt; 10:36AM

DOM

$(p#time).text(<b>Departs At:</b> 10:36AM); [<p id="time">&lt;b&gt;Departs At: &lt;/b&gt; 10:36AM</p>]

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Queries with html()


p#time span.label 10:36AM Departs At:

DOM

$(p#time).html(); <span class="label">Departs At:</span> 10:36AM

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Setting with html()


p#time b span.label 10:36AM Departs At:

DOM

$(p#time).html(<b>Departs At:</b> 10:36AM); <b>Departs At:</b> 10:36AM

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

text()
Queries Setting Strips HTML Escapes HTML

html()
Maintains HTML Builds DOM

LEVEL 4

CONTENTS MAY SHIFT

Prepending
p#time span.label span.label 10:36AM Departure Time:

DOM

$(span.label).prepend(Departure); <span class=label>Departure Time: </span> 10:36AM

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Appending
p#time span.label Departure Time:

DOM

10:36AM from the Gate

$(p#time).append( from the Gate); <p><span class=label>Departure Time: </span> 10:36AM from the Gate</p>

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Inserting Siblings with before


body h1 h3 p#time Manifest for Flight #1337 Departure Details span.label 10:36AM p.gate Gate 26 Time:

DOM

$(p#time).before(<h3>Departure Details</h3>); <p><span class=label>Time</span>10:36AM</p>

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Inserting Siblings with AFTER()


body h1 h3 p#time Manifest for Flight #1337 Departure Details span.label 10:36AM p.gate Gate 26 Time:

DOM

$(h1) .after(<h3>Departure Details</h3>); <h1>Manifest for Flight #1337</h1>

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Removing nodes
body h1 p#time Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:

DOM

$(span.label).remove(); <span>Time:</span>

JQUERY

LEVEL 4

CONTENTS MAY SHIFT

Moving nodes
body h1 p#time Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:

DOM

LEVEL 4

CONTENTS MAY SHIFT

Moving nodes
body h1 p.gate p#time Manifest for Flight #1337 Gate 26 span.label 10:36AM Time:

DOM

JQUERY
var gate = $(p.gate).remove(); $(p#time).before(gate); <p class=gate>... <p id=time>...

LEVEL 4

CONTENTS MAY SHIFT

review
Functions for Manipulating Content
function
.text .html

without parameter
query the plain text query html and text

with parameter
set the plain text set html and text

description
.prepend .append .before .after .remove add element inside the beginning of the selection add element inside the end of the selection add element before selection add element after selection remove element from the DOM

LEVEL 4

CONTENTS MAY SHIFT

Fasten your sea tbel ts


- Events & Animation -

How events work


Dividing Responsibilities
body h1 p#time

DOM
Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:

ICK! CL

LEVEL 5

FASTEN YOUR SEATBELTS

Functions
Just Enough JavaScript
function name (parameters) {instructions}

Example
function popWarning (message){ alert(Warning: + message); }

LEVEL 5

FASTEN YOUR SEATBELTS

Anonymous Functions
Just Enough JavaScript
function name (parameters) {instructions}

Example
function (message){ alert(Warning: + message); }

LEVEL 5

FASTEN YOUR SEATBELTS

Document Ready
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready();

</script> </head>

LEVEL 5

FASTEN YOUR SEATBELTS

Document Ready
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert(The DOM is Ready!); }); </script> </head>

LEVEL 5

FASTEN YOUR SEATBELTS

Click Event
Left-Button Mouse Click
$(document).ready(function(){ $(p).click(function(){ alert(Got It!); }); });

LEVEL 5

FASTEN YOUR SEATBELTS

Click To Hide
$(document).ready(function(){ $(p).click(function(){ $(p).hide(); }); });

LEVEL 5

FASTEN YOUR SEATBELTS

Click To Hide
$(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); });

this refers to the current object usually just a plain DOM element wrap it to access jQuery functions: $(this)

LEVEL 5

FASTEN YOUR SEATBELTS

Notes About timing


$(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); });

LEVEL 5

FASTEN YOUR SEATBELTS

Hover
$(document).ready(function(){ $(p).hover(function(){ $(this).addClass(highlight); }); });

jQuery

Manifest for Flight #1337


Time: 10:36AM Gate 26

BROWSER

LEVEL 5

FASTEN YOUR SEATBELTS

Hover
$(document).ready(function(){ $(p).hover( function(){$(this).addClass(highlight);}, function(){$(this).removeClass(highlight);} ); });

jQuery

Manifest for Flight #1337


Time: 10:36AM Gate 26

BROWSER

LEVEL 5

FASTEN YOUR SEATBELTS

Hover
$(document).ready(function(){ $(p).hover( function(){$(this).toggleClass(highlight);} ); });

jQuery

Manifest for Flight #1337


Time: 10:36AM Gate 26

BROWSER

LEVEL 5

FASTEN YOUR SEATBELTS

Keyboard Events
keydown res once when a key is depressed keypress res one or more times when a key is held down keyup res once when a key is released

LEVEL 5

FASTEN YOUR SEATBELTS

Keypress
$(document).ready(function(){ $(body).keypress( function(){alert(Fantastic!);} ); });

jQuery

F G
LEVEL 5

FASTEN YOUR SEATBELTS

The Event Object


$(document).ready(function(){ $(body).keypress( function(event){alert(Fantastic!);} ); });

jQuery

event.which has a numeric code for the key that was pressed event has other attributes like pageX, pageY, and target

LEVEL 5

FASTEN YOUR SEATBELTS

Keypress
$(document).ready(function(){ $(body).keypress( function(event){ if (event.which == 102){alert(Fantastic!)}; } ); });

jQuery

F G
LEVEL 5

FASTEN YOUR SEATBELTS

The Event Objects Functions


event.preventDefault() prevent the browsers normal reaction event.stopPropogation() prevent the event from bubbling up the DOM tree

LEVEL 5

FASTEN YOUR SEATBELTS

A SPlash of AJAX
Fake AJAX animating and other manipulations using JavaScript Real AJAX submitting or loading content via XMLHttpRequest

LEVEL 5

FASTEN YOUR SEATBELTS

Animating Transitions
Manifest for Flight #1337
Time: 10:36AM Gate 26

BROWSER

p#time

span.label 10:36AM

Time:

DOM

$(p#time) .hide(slow); [<p id=time><span class="label">Time...

JQUERY

LEVEL 5

FASTEN YOUR SEATBELTS

Slide Animations
Manifest for Flight #1337
Time: 10:36AM Gate 26

BROWSER

p#time

span.label 10:36AM

Time:

DOM

$(p#time).slideUp(slow); $(p#time).slideDown(slow); $(p#time) .slideToggle(slow);

JQUERY

LEVEL 5

FASTEN YOUR SEATBELTS

Fade Animations
Manifest for Flight #1337
Time: 10:36AM Gate 26

BROWSER

p#time

span.label 10:36AM

Time:

DOM

$(p#time).fadeIn(slow); $(p#time).fadeOut(slow); $(p#time).fadeToggle(slow);

JQUERY

LEVEL 5

FASTEN YOUR SEATBELTS

True ajax
sending or receiving content via XMLHttpRequest fetch HTML content with the .load() function

LEVEL 5

FASTEN YOUR SEATBELTS

Using load()
p.gate span.label span.number span.number Gate 26

DOM

JQUERY
$(span.number).load(/flights/824/gate); [<span class=number>26</span>]

LEVEL 5

FASTEN YOUR SEATBELTS

Review
Named functions
function name (parameters) {instructions}

Anonymous functions
function (parameters) {instructions}

Document Ready Wrapper


$(document).ready(function(){ });

LEVEL 5

FASTEN YOUR SEATBELTS

Review
General Event Handler
$(element).event(function(){ });

Commonly Used Events


function
.ready .click .hover

description
res when the object is completely loaded left mouse button is clicked and released once when the mouse moves on to an element, then again when it moves out

.keypress keyboard key is pressed and released

LEVEL 5

FASTEN YOUR SEATBELTS

Review
Event Object
description
.which .pageX & .pageY .preventDefault() .stopPropogation() code for which key was pressed coordinates of the mouse pointer stop the broswer from its default action stop the event from triggering other handlers

LEVEL 5

FASTEN YOUR SEATBELTS

Review
Animations
functions
.hide(speed) .show(speed) .toggle(speed) .slideDown(speed) .slideUp(speed) .slideToggle(speed) .fadeIn(speed) .fadeOut(speed) .fadeToggle(speed)

description
show/reveal with a scaling effect

show/reveal with a sliding effect

show/reveal with a dissolve effect

Load via AJAX


$(element).load(address);

LEVEL 5

FASTEN YOUR SEATBELTS