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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma