Webwork
/
jQuery Effects

jQuery

For a Web designer, jQuery is like finally getting that magic set that you wanted when you were eight years old. It's estimated that jQuery is being used by well over half of the top 100 most trafficked web sites. Almost all of the graceful and elegant sliding, fading and moving things that you see on the Web are accomplished with jQuery.

jQuery is basically a collection or library of JavaScripts that spares the designer the necessity of writing complex code. The main jQuery library can be downloaded and installed on your server or you can use a line in the head of your document to reference one of the publicly available libraries such as those offered by Google or Microsoft.

Head:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {

$("#explodeshow").click(function () {
$(this).show("explode", { pieces: 64 }, 2000);
});

});
</script>

<style type="text/css">
.demodiv {
margin: 0px;
width: 100px;
height: 60px;
background: #eee; padding: 20px;
border: 1px solid black;
position: relative;
}
</style>
Body:
<div id="explodeshow" class="demodiv">Explode - Show</div>
Web page:
Explode - Show

Effects Examples

Source:
$("#explodehide").click(function () { $(this).hide("explode", { pieces: 64 }, 2000); });
Web page:
Explode - Hide
Source:
$("#fade").click(function () { $(this).hide("fade", {}, 1000); });
Web page:
Fade
Source:
$("#blind").click(function () { $(this).hide("blind", { direction: "horizontal" }, 1000); });
Web page:
Blind
Source:
$("#clip").click(function () { $(this).hide("clip", { direction: "horizontal" }, 1000); });
Web page:
Clip
Source:
$("#puff").click(function () { $(this).hide("puff", {}, 1000); });
Web page:
Puff
Source:
$("#drophidedown").click(function () { $(this).hide("drop", { direction: "down" }, 1000); });
Web page:
Drop - Hide Down
Source:
$("#slide").click(function () { $(this).hide("slide", { direction: "up" }, 1000); });
Web page:
Slide
Source:
$("#explodeshow2").click(function () {
$("#otherbox").show("explode", { pieces: 64 }, 2000);
});

$("#explodehide2").click(function () {
$("#otherbox").hide("explode", { pieces: 64 }, 2000);
});
Web Page:
Explode - Hide otherbox
Otherbox
Explode - Show otherbox


Source:
$("#bounce").click(function () { $(this).effect("bounce", { times:3 }, 300); });
Web page:
Bounce
Source:
$("#pulsate").click(function () { $(this).effect("pulsate", { times:4 }, 1000); });
Web page:
Pulsate
Source:
$("#shake").click(function () { $(this).effect("shake", { times:3, direction: "right" }, 100); });
Web page:
Shake

The following script adds a time-delay to the link action so the jQuery effect will display before the linked page loads.

Source:
<script>
$(document).ready(function(){

$(".fade-n-go").click(function(e){
$(this).hide("fade", {}, 3000);
e.preventDefault();
var loc = this.href;
if(loc){
window.setTimeout( function(){ window.location.href=loc; }, 3000 );
}
});

});
</script>

<a class="fade-n-go" href="http://www.re-vision.com/webwork/"><img src="StealYourData.jpg" width="50%" alt="StealYourData" /></a>



Web page:
StealYourData
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com