jQuery Effects & Methods

jQuery Effects

jQuery provides a trivially simple interface for doing various kind of amazing effects jQuery methods allow us to quickly apply commonly used effects with a minimum configuration.

jQuery Effect Methods

You have seen basic concept of jQuery Effects. Following table lists down all the important methods to create different kind of effects:

jQuery Hide and Show

With jQuery, you can hide and show HTML elements with the hide() and show() methods

Example

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“#hide”).click(function() {

$(“p”).hide();

});

$(“#show”).click(function(){

$(“p”).show();

}};

});

</script>

</head>

<body>

<p>if you click on the “Hide” button, i will disappear</p>

<button id =”hide”>Hide</button>

<button id=”show”>Show</button>

</body>

</html>

Both hide() and show() can take two optional : speed and call back.

 

Syntax 

$(selector).hide(speed ,call-back)

$(selector).show(speed, call-back)

The speed parameter specifies the speed of the hiding / showing and can take the following values:”slow”, ”fast”,” normal”, or  milliseconds

 

Example 

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“#hide”).click(function() {

$(“p”).hide(1000);

});

}};

</script>

</head>

<body>

<p>This is a paragraph with little content</p>

<p>This is another small paragraph.</p>

</body>

</html>

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.ex.hide”).click(function() {

$(this).parents(“.ex”).hide(“slow”);

}};

}};

</script>

<style type=”text/css”>

div.ex

{

background-color:#e5eecc;

padding:7px;

border:solid 1px #c3c3c3;

}

</style>

</head>

<body>

<h3>Island Trading</h3>

<div class=”ex”>

<button class=”hide”> Hide me</button>

<p>Contact:Helen Bennett<br/>

Garden House Crowther Way<br/>

London</p>

</div>

<h3>Paris specialities</h3>

<div class=”ex”>

<button class=”hide”>Hide me</button>

<p>Contact:Marie Bertrand<br/>

265,Boulevard Charonne<br/>

paris</p>

</div>

</body>

</html>

<p>if you click on the “Hide” button, i will disappear</p>

<button id =”hide”>Hide</button>

<button id=”show”>Show</button>

</body>

</html>

The call-back parameter is the name of a function to be executed after the hide(or show) function completes.

 

jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods. Shown elements are hidden and hidden elements are shown.

syntax

$(selector).toggle(speed, call-back)

The speed parameter can take the following values: “slow”,” fast”,” normal”, or milliseconds.

 

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“#hide”).click(function() {

$(“p”).toggle();

}};

}};

</script>

</head>

<body>

<button>Toggle</button>

<p>This is a paragraph with little content</p>

<p>This is another small paragraph.</p>

</body>

</html>

The call-back parameter is the name of a function to be executed after the hide(or show) method completes.

 

jQuery Slide – slideDown , slide Up, slideToggle

The jQuery slide methods gradually change the height for selected elements.

jQuery has the following slide methods :

 

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(spped,callback)

The speed parameter can take the following values” “slow” , “fast”, “normal”, or milliseconds.

The callback parameter is the name of a function to be executed after the function completes.

 

SlideDown() Example

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.flip”).click(function() {

$(“.panel”).slideDown(“slow”);

});

</script>

<style type=”text/css”>

div.panel.p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class=”panel”>

<p>Because time is valuable, we deliver quick and easy learning</p>

<p> At w3schools,you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p class=”flip”>Show Panel</p>

</body>

</html>

 

slideUp() Example

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.flip”).click(function() {

$(“.panel”).slideup(“slow”);

}};

}};

</script>

<style type=”text/css”>

div.panel.p.flip

{

margin:0px;

padding:5pxl

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

}

</style>

</head>

<body>

<div class=”panel”>

<p>Because time is valuabe, we deliver quick and easy learning</p>

<p> At w3shools, you can study everything you need to learn,in an accessible and handy format. </p>

</div>

<p class = “flip”> Hide Panel</p>

</body>

</html>

 

slide Toggle() Example

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.flip”).click(function() {

$(“panel”).slideToggle(“slow”);

}};

}};

</script>

<style type=”text/css”>

div.panel,p.flip

{

margin:0px;

padding:5pxl

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class=”panel”>

<p>Because time is valuabe, we deliver quick and easy learning</p>

<p> At w3shools, you can study everything you need to learn,in an accessible and handy format. </p>

</div>

<p class = “flip”> Hide Panel</p>

</body>

</html>

 

jQuery Fade – fadeIn, fadeout, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.

jQuery has the following fade methods

 

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opticity,callback)

The speed parameter can take the following values : “slow”, “fast”, “normal”, or milliseconds.

The opacity parameter in the fadeTo() method allows fading a given opacity.

The callback parameter is the name of a function to be executed after the function completes.

 

fadeTo() Example

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function() {

$(“div”).fadeTo(“slow”,0.25);

}};

}};

</script>

</head>

<body>

<div style=”background:yellow;width:300px;height:300px”>

<button>Click to Fade </button>

</div>

</body>

</html>

 

fadeout() Example

<html>

<head>

<script type=”text/javascript” src=”jQuery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function() {

$(“div”).fadeOut(4000);

}};

}};

</script>

</head>

<body>

<div style=”background:yellow;width:200px”>CLICK ME AWAY!</div>

<p>If you click on the box above, it will be removed.</p>

</body>

</html>