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>
Effects Examples
Source:
$("#explodehide").click(function () {
$(this).hide("explode", { pieces: 64 }, 2000);
});
Source:
$("#fade").click(function () {
$(this).hide("fade", {}, 1000);
});
Source:
$("#blind").click(function () {
$(this).hide("blind", { direction: "horizontal" }, 1000);
});
Source:
$("#clip").click(function () {
$(this).hide("clip", { direction: "horizontal" }, 1000);
});
Source:
$("#puff").click(function () {
$(this).hide("puff", {}, 1000);
});
Source:
$("#drophidedown").click(function () {
$(this).hide("drop", { direction: "down" }, 1000);
});
Source:
$("#slide").click(function () {
$(this).hide("slide", { direction: "up" }, 1000);
});
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);
});
Source:
$("#pulsate").click(function () {
$(this).effect("pulsate", { times:4 }, 1000);
});
Source:
$("#shake").click(function () {
$(this).effect("shake", { times:3, direction: "right" }, 100);
});
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>