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>
<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);
});
$("#otherbox").show("explode", { pieces: 64 }, 2000);
});
$("#explodehide2").click(function () {
$("#otherbox").hide("explode", { pieces: 64 }, 2000);
});
Web Page:
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:
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>
$(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: