My Project

$(document).ready(function(){

$('div#bounce').click(

function(){

$(this).effect("bounce", {times:5,direction:'right'},250);

});

$('div#bounce2').click(

function(){

$(this).effect("bounce", {times:5},250);

});

$("#highlight").click(function () {

$(this).effect("highlight", {}, 1000);

});

$("#hide").click(function () {

$(this).hide("blind", {direction:"vertical"}, 1000);

});

$("#explode").click(function () {

$(this).hide("explode", {}, 1000);

});

$("#fold").click(function () {

$(this).hide("fold", {size:50}, 1000);

});

$("#puff").click(function () {

$(this).hide("puff", { percent: 1000 }, 1000);

});

$("#pulsate").click(function () {

$(this).effect("pulsate", { times: 9 }, 50);

});

$("#scale").click(function () {

$(this).effect("scale", {

percent:150,

direction:'verticalal'}, 1000);

});

#bounce { background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); /* the standard way */; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#bounce2 { background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, green 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, green 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, green 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, green 100%); /* the standard way */; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#highlight {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#hide{background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#red {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#explode {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%);; margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#fold {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#puff {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#pulsate {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

#scale {background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); margin:20px; width:100px; height:50px; float:left; color:#7CFC00;}

.text{

color:red;

}

#P_S {

display:block;

width: 112px;

position: absolute;

bottom: 0px;

right: 280px;

font-weight:bold;

font-size:30px;

color:green;

}

body{

background-image:url('http://img.vmessages.com/en/santa-claus/44.gif');

text-align: center;

cursor:pointer;

}

<!DOCTYPE html>

<html>

<head>

</head>

<h1 class="text">Some of jQuery effects :)</h1>

<body>

<div id = "bounce" class="gradient">I'm bouncing :)</div>

<div id = "hide">I'm embarassed</div>

<div id = "explode">BANZAI!</div>

<div id="pulsate">Bzzzz</div>

<div id="scale">I wanna be bigger</div>

<div id="P_S">Merry X-mas ^__^</div>

</body>

</html>

_____________________________________________________________________________________