The largest Interview Solution Library on the web


java tutorials/
« Previous | 1 | 2 | 3 | Next »

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. This tutorial covers all the important jQuery methods to create visual effects.

Showing and Hiding Elements

The commands for showing and hiding elements are pretty much what we would expect: show() to show the elements in a wrapped set and hide() to hide them.

Syntax

Here is the simple syntax for show() method:

[selector].show( speed, [callback] );

Here is the description of all the parameters:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Following is the simple syntax for hide() method:

[selector].hide( speed, [callback] );

Here is the description of all the parameters:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Example

Consider the following HTML file with a small JQuery coding:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show( 1000 );
});
$("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class="mydiv">
This is a SQUARE
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>

This will produce the following result

This is a SQUARE

Toggling the Elements

jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Syntax

Here is the simple syntax for one of the toggle() methods:

[selector]..toggle([speed][, callback]);

Here is the description of all the parameters:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Example

We can animate any element, such as a simple <div> containing an image:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".clickme").click(function(event){
$(".target").toggle('slow', function(){
$(".log").text('Transition Complete');
});
});
});
</script>
<style>
.clickme{ margin:10px;padding:12px; border:2px solid #666;
width:100px; height:50px;}
</style>
</head>
<body>
<div class="content">
<div class="clickme">Click Me</div>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</div>
</body>
</html>

This will produce the following result

Click Me
jQuery

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:
S.No.Methods & Description
1animate( params, [duration, easing, callback] )
A function for making custom animations.
2fadeIn( speed, [callback] )
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
3fadeOut( speed, [callback]
Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
4fadeTo( speed, opacity, callback )
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
5hide( )
Hides each of the set of matched elements if they are shown.
6hide( speed, [callback] )
Hide all matched elements using a graceful animation and firing an optional callback after completion.
7show( )
Displays each of the set of matched elements if they are hidden.
8show( speed, [callback] )
Show all matched elements using a graceful animation and firing an optional callback after completion.
9slideDown( speed, [callback] )
Reveal all matched elements by adjusting their height and firing an optional callback after completion.
10slideToggle( speed, [callback] )
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
11slideUp( speed, [callback] )
Hide all matched elements by adjusting their height and firing an optional callback after completion.
12stop( [clearQueue, gotoEnd ])
Stops all the currently running animations on all the specified elements.
13toggle( )
Toggle displaying each of the set of matched elements.
14toggle( speed, [callback] )
Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
15toggle( switch )
Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
16jQuery.fx.off
Globally disable all animations.
animate() Method

The animate( ) method performs a custom animation of a set of CSS properties.

Syntax

Here is the simple syntax to use this method:

selector.animate( params, [duration, easing, callback] );

Parameters

Here is the description of all the parameters used by this method:
  • params: A map of CSS properties that the animation will move toward.
  • duration: This is optional parameter representing how long the animation will run.
  • easing: This is optional parameter representing which easing function to use for the transition
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#out").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
$("#in").click(function(){
$("#block").animate({
width: "100",
opacity: 1.0,
marginLeft: "0in",
fontSize: "100%",
borderWidth: "1px"
}, 1500 );
});
});
</script>
<style>
div {background-color:#bca; width:100px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="out"> Animate Out </button>
<button id="in"> Animate In</button>
<div id="block">Hello</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

Hello

fadeIn() Method

The fadeIn( ) method fades in all matched elements by adjusting their opacity and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.fadeIn( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#in").click(function(){
$(".target").fadeIn( 'slow', function(){
$(".log").text('Fade In Transition Complete');
});
});
$("#out").click(function(){
$(".target").fadeOut( 'slow', function(){
$(".log").text('Fade Out Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="out"> Fade Out </button>
<button id="in"> Fade In</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

jQuery

fadeOut() Method

The fadeOut( ) method fades out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.fadeOut( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#in").click(function(){
$(".target").fadeIn( 'slow', function(){
$(".log").text('Fade In Transition Complete');
});
});
$("#out").click(function(){
$(".target").fadeOut( 'slow', function(){
$(".log").text('Fade Out Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="out"> Fade Out </button>
<button id="in"> Fade In</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

jQuery

fadeTo() Method

The fadeTo( ) method fades the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.fadeTo(speed, opacity[, callback]);

Parameters

Here is the description of all the parameters used by thi method:
  • speed: A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • opacity: A number between 0 and 1 denoting the target opacity.
  • callback: This is optional parameter representing a function to call once the animation is complete.
Exmple

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#more").click(function(){
$(".target").fadeTo( 'slow', 0.7, function(){
$(".log").text('More Opacity Transition Complete');
});
});
$("#less").click(function(){
$(".target").fadeTo( 'slow', 0.2, function(){
$(".log").text('less Opacity Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="less"> Less Opacity </button>
<button id="more"> More Opacity</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>



Click on any of the buttons

jQuery

hide() Method

The hide( ) method simply hides each of the set of matched elements if they are shown. There is another form of this method which controls the speed of the animation.

Syntax

Here is the simple syntax to use this method:

selector.hide( );

Parameters

Here is the description of all the parameters used by this method:
  • NA:
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show();
});
$("#hide").click(function () {
$(".mydiv").hide();
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class="mydiv">
This is a SQUARE.
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>

This is a SQUARE.

hide( speed, [callback] ) Method

The hide( speed, [callback] ) method hides all matched elements using a graceful animation and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.hide( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show( 100 );
});
$("#hide").click(function () {
$(".mydiv").hide( 100 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class="mydiv">
This is a SQUARE.
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>

This will produce the following result:

This is a SQUARE.

show() Method

The show( ) method simply shows each of the set of matched elements if they are hidden. There is another form of this method which controls the speed of the animation.

Syntax

Here is the simple syntax to use this method:

selector.show( );

Parameters

Here is the description of all the parameters used by this method:
  • NA:
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show();
});
$("#hide").click(function () {
$(".mydiv").hide();
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class="mydiv">
This is a SQUARE.
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>

This will produce the following result:

This is a SQUARE.

show( speed, [callback] ) Method

The show( speed, [callback] ) method shows all matched elements using a graceful animation and firing an optional callback after completion.

Synta

Here is the simple syntax to use this method −

selector.show( speed, [callback] );

Parameter

Here is the description of all the parameters used by this method −
  • speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback − This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show( 100 );
});
$("#hide").click(function () {
$(".mydiv").hide( 100 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class="mydiv">
This is a SQUARE.
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>

This will produce the following result:

This is a SQUARE.

slideDown() Method

The slideDown() method reveals all matched elements by adjusting their height and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.slideDown( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#show").click(function () {
$(".mydiv").show( 100 );
});
$("#hide").click(function () {
$(".mydiv").hide( 100 );
});
});
</script>
<style>
.mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px;
height:100px;}
</style>
</head>
<body>
<div class="mydiv">
This is a SQUARE.
</div>
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
</body>
</html>

This will produce the following result:

This is a SQUARE.

slideToggle() Method

The slideToggle() method toggles the visibility of all matched elements by adjusting their height and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.slideToggle( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#toggle").click(function(){
$(".target").slideToggle( 'slow', function(){
$(".log").text('Toggle Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on the following button:</p>
<button id="toggle"> Toggle </button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>

This will produce the following result:

Click on the following button:

jQuery

slideUp() Method

The slideUp() method hides all matched elements by adjusting their height and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.slideUp( speed, [callback] );

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#down").click(function(){
$(".target").slideDown( 'slow', function(){
$(".log").text('Slide Down Transition Complete');
});
});
$("#up").click(function(){
$(".target").slideUp( 'slow', function(){
$(".log").text('Slide Up Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="up"> Slide Up </button>
<button id="down"> Slide Down</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

jQuery

stop() Method

The stop( [clearQueue, gotoEnd ]) method stops all the currently running animations on all the specified elements.

Syntax

Here is the simple syntax to use this method:

selector.stop( [clearQueue], [gotoEnd] ) ;

Parameters

Here is the description of all the parameters used by this method:
  • clearQueue: This is optional boolean parameter. When set to true clears the animation queue, effectively stopping all queued animations.
  • gotoEnd : This is optional boolean parameter. A Boolean (true/false) that when set to true causes the currently playing animation to immediately complete, including resetting original styles on show and hide and calling the callback function.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#go").click(function(){
$(".target").animate({left: '+=100px'}, 2000);
});
$("#stop").click(function(){
$(".target").stop();
});
$("#back").click(function(){
$(".target").animate({left: '-=100px'}, 2000);
});
});
</script>
<style>
p {background-color:#bca; width:250px; border:1px solid green;}
div{position: absolute; left: 50px; top:300px;}
</style>
</head>
<body>
<p>Click on any of the following buttons:</p>
<button id="go"> GO</button>
<button id="stop"> STOP </button>
<button id="back"> BACK </button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click on any of the following buttons:

jQuery

toggle() Method

The toggle() method toggles displaying each of the set of matched elements.

Syntax

Here is the simple syntax to use this method:

selector.toggle( );

Parameters

Here is the description of all the parameters used by this method:
  • NA:
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#toggle").click(function(){
$(".target").toggle( );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on the following button:</p>
<button id="toggle"> Toggle </button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click on the following button:

jQuery

toggle( speed, [callback]) Method

The toggle( speed, [callback]) method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.

Syntax

Here is the simple syntax to use this method:

selector.toggle( speed, [callback]);

Parameters

Here is the description of all the parameters used by this method:
  • speed: A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • callback: This is optional parameter representing a function to call once the animation is complete.
Example

Following is a simple example showing the usage of this method:

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#toggle").click(function(){
$(".target").toggle( 'slow', function(){
$(".log").text('Toggle Transition Complete');
});
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on the following button:</p>
<button id="toggle"> Toggle </button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
<div class="log"></div>
</body>
</html>

This will produce the following result:

Click on the following button:

jQuery

toggle( switch ) Method

The toggle( switch ) method toggle displaying each of the set of matched elements based upon the passed paratmer. If true parameter shows all elements, false hides all elements.

Syntax

Here is the simple syntax to use this method:

selector.toggle( switch );

Parameters

Here is the description of all the parameters used by this method:
  • switch: A switch to toggle the display on.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#false").click(function(){
$(".target").toggle(false);
});
$("#true").click(function(){
$(".target").toggle(true);
});
});
</script>
<style>
p {background-color:#bca; width:250px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the following buttons:</p>
<button id="false"> False Switch </button>
<button id="true"> True Switch </button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click on any of the following buttons:

jQuery

jQuery.fx.off() Method

The jQuery.fx.off() method globally disables all the animations.

Syntax

Here is the simple syntax to use this method:

jQuery.fx.off = [true | false ] ;

Parameters

Here is the description of all the parameters used by this method:
  • Boolean This should be set to either false to enable the animations or to true to disable the animations globally.
Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#enable").click(function(){
jQuery.fx.off = false;
});
$("#disable").click(function(){
jQuery.fx.off = true;
});
$("#go").click(function(){
$(".target").animate({left: '+=200px'}, 2000);
});
$("#back").click(function(){
$(".target").animate({left: '-=200px'}, 200);
});
});
</script>
<style>
p {background-color:#bca; width:350px; border:1px solid green;}
div{position: absolute; left: 50px; top:300px;}
</style>
</head>
<body>
<p>Click enable or disable and then go or back button:</p>
<button id="enable"> Enable</button>
<button id="disable"> Disable </button>
<button id="go"> GO</button>
<button id="back"> BACK </button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click enable or disable and then go or back button:

jQuery

UI Library Based Effects

To use these effects you can either download latest jQuery UI Library jquery-ui- 1.11.4.custom.zip from jQuery UI Library or use Google CDN to use it in the similar way as we have done for jQuery. We have used Google CDN for jQuery UI using the following code snippet in the HTML page so we can use jQuery UI –
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
</head>
S.No.Methods & Description
1Blind
Blinds the element away or shows it by blinding it in.
2Bounce
Bounces the element vertically or horizontally n-times.
3Clip
Clips the element on or off, vertically or horizontally.
4Drop
Drops the element away or shows it by dropping it in.
5Explode
Explodes the element into multiple pieces.
6Fold
Folds the element like a piece of paper.
7Highlight
Highlights the background with a defined color.
8Puff
Scale and fade out animations create the puff effect.
9Pulsate
Pulsates the opacity of the element multiple times.
10Scale
Shrink or grow an element by a percentage factor.
11Shake
Shakes the element vertically or horizontally n-times.
12Size
Resize an element to a specified width and height.
13Slide
Slides the element out of the viewport.
14Transfer
Transfers the outline of an element to another.
Blind Effect

The Blind effect can be used with show/hide/toggle. This blinds the element away or shows it by blinding it in.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "blind", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • direction: The direction of the effect. Can be "vertical" or "horizontal". Default is vertical.
  • mode: The mode of the effect. Can be "show" or "hide". Default is hide.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui. min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "blind", {direction: "horizontal"}, 1000 );
});
$("#show").click(function(){
$(".target").show( "blind", {direction: "horizontal"}, 1000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

jQuery

Bounce Effect

The Bounce effect can be used with effect() method. This bounces the element multiple times, vertically or horizontally

Syntax

Here is the simple syntax to use this effect:

selector.effect( "bounce", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • direction: The direction of the effect. Can be "up", "down", "left", "right". Default is "up".
  • distance: Distance to bounce. Default is 20
  • mode: The mode of the effect. Can be "show", "hide" or "effect". Default is "effect".
  • times: Times to bounce. Default is 5.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "bounce", {times:3}, 300 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click the button</p>
<button id="button"> Bounce </button>
<div class="target">
</div>
</body>
</html>



Click the button


Clip Effect

The Clip effect can be used with show/hide/toggle. This clips the element on or off, vertically or horizontally.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "clip", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • direction: The direction of the effect. Can be "vertical" or "horizontal". Default is vertical.
  • mode: The mode of the effect. Can be "show" or "hide". Default is hide.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "clip", {direction: "horizontal"}, 1000 );
});
$("#show").click(function(){
$(".target").show( "clip", {direction: "vertical"}, 1000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

jQuery

Drop Effect

The Drop effect can be used with show/hide/toggle. This drops the element away or shows it by dropping it in.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "drop", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • direction: The direction of the effect. Can be "left", "right", "up", "down". Default is left.
  • mode: The mode of the effect. Can be "show" or "hide". Default is hide.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "drop", {direction: "up"}, 1000 );
});
$("#show").click(function(){
$(".target").show( "drop", {direction: "down"}, 1000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
<img src="./images/jquery.jpg" alt="jQuery" />
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons

jQuery

Explode Effect

The Explode effect can be used with show/hide/toggle. This explodes or implodes the element into/from many pieces.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "explode", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • pieces: Number of pieces to be exploded to/imploded from.
  • mode: The mode of the animation. Can be set to "show" or "hide".
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "explode", {pieces: 16 }, 2000 );
});
$("#show").click(function(){
$(".target").show( "explode", {pieces: 16}, 2000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click the button


Fold Effect

The Fold effect can be used with show/hide/toggle. This folds the element like a piece of paper.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "fold", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • horizFirst: Whether to fold horizontally first or not. Can be true or false. Defualt is false.
  • mode: The mode of the effect. Can be "show" or "hide". Default is hide.
  • size: Size to be folded to. Default is 15.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "fold", {horizFirst: true }, 2000 );
});
$("#show").click(function(){
$(".target").show( "fold", {horizFirst: true}, 2000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons


Highlight Effect

The Highlight effect can be used with effect() method. This highlights the element's background with a specific color, default is yellow.

Syntax

Here is the simple syntax to use this effect:

selector.effect( "highlight", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • color: Highlight color. Default is "#ffff99".
  • mode: The mode of the effect. Can be "show", "hide". Default is "show".
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "highlight", {color:"#669966"}, 3000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click the button</p>
<button id="button"> Highlight </button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click the button


Puff Effect

The Puff effect can be used with show/hide/toggle. This creates a puff effect by scaling the element up and hiding it at the same time.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "puff", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • mode: The mode of the effect. Can be "show" or "hide". Default is hide.
  • percent: The percentage to scale to. Default is 150.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "puff", { }, 2000 );
});
$("#show").click(function(){
$(".target").show( "puff", {percent:100}, 2000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons


Pulsate Effect

The Pulsate effect can be used with effect() method. This pulsates the opacity of the element multiple times.

Syntax

Here is the simple syntax to use this effect:

selector.effect( "pulsate", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • times: Times to pulsate. Default is 3.
  • mode: The mode of the effect. Can be "show", "hide". Default is "show".
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "pulsate", {times:5}, 3000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click the button</p>
<button id="button"> Pulsate </button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click the button


Scale Effect

The Scale effect can be used with show/hide/toggle. This shrinks or grows an element by a percentage factor.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "scale", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • direction: The direction of the effect. Can be "both", "vertical" or "horizontal". Default is both.
  • from: The state at beginning, usually not needed. This would be an object and would be given in the form of { height: .., width: .. }.
  • origin: The vanishing point. This is an array and by default set to ['middle','center'].
  • percent: The percentage to scale to, number. Default is 0/100.
  • scale: Which areas of the element will be resized: 'both', 'box', 'content' Box resizes the border and padding of the element Content resizes any content inside of the element. Default is both.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "scale", {percent: 200, direction:
'horizontal'}, 2000 );
});
$("#show").click(function(){
$(".target").show( "scale", {percent: 200, direction:
'vertical' }, 2000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons


Shake Effect

The Shake effect can be used with effect() method. This shakes the element multiple times, vertically or horizontally.

Syntax

Here is the simple syntax to use this effect:

selector.effect( "shake", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • times: Times to shake. Default is 3.
  • distance: Distance to shake. Default is 20.
  • direction: The direction of the effect. Can be "up", "down", "left", "right". Default is "left"
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#button").click(function(){
$(".target").effect( "shake", {times:4}, 1000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click the button</p>
<button id="button"> Shake </button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click the button


Size Effect

The Size effect can be used with effect() method. This resizes an element to a specified width and height.

Syntax

Here is the simple syntax to use this effect:

selector.effect( "size", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • from: State at beginning, usually not needed. This is an object in the form of { height: .., width: .. }
  • to: Height and width to resize to. This is an object in the form of { height: .., width: .. }
  • origin: The vanishing point, default for show/hide. This is an array and default is ['middle','center'].
  • scale: Which areas of the element will be resized: 'both', 'box', 'content' Box resizes the border and padding of the element Content resizes any content inside of the element. Default is "both"
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#big").click(function(){
$(".target").effect( "size", { to: {width: 200,height: 200} }, 1000 );
});
$("#small").click(function(){
$(".target").effect( "size", { to: {width: 10,height: 10} }, 1000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click any of the buttons</p>
<button id="big"> Big </button>
<button id="small"> Small </button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click any of the buttons


Slide Effect

The Slide effect can be used with show/hide/toggle. This slides the element out of the viewport.

Syntax

Here is the simple syntax to use this effect:

selector.hide|show|toggle( "slide", {arguments}, seed );

Parameters

Here is the description of all the arguments:
  • direction: The direction of the effect. Can be "left", "right", "up", "down". Default is left.
  • distance: The distance of the effect. It is set to either the height or width of the element depending on the direction option.
  • mode: The mode of the effect. Can be "show" or "hide". Default is show.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".target").hide( "slide", { direction: "down" }, 2000 );
});
$("#show").click(function(){
$(".target").show( "slide", {direction: "up" }, 2000 );
});
});
</script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
div{ width:100px; height:100px; background:red;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id="hide"> Hide </button>
<button id="show"> Show</button>
<div class="target">
</div>
</body>
</html>

This will produce the following result:

Click on any of the buttons


Transfer Effect

The Transfer effect can be used with effect() method. This Transfers the outline of an element to another element. It is very useful when trying to visualize interaction between two elements.

Syntax

Here is the simple syntax to use this effect:

selector.effect( "transfer", {arguments}, speed );

Parameters

Here is the description of all the arguments:
  • className: Optional class name the transfer element will receive.
  • to: jQuery selector, the element to transfer to.
Example

Following is a simple example showing the usage of this effect:

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jqueryui.
min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var i = 1 - $("div").index(this);
$(this).effect("transfer",{ to: $("div").eq(i) }, 500);
});
});
</script>
<style>
div.green { margin: 0px; width: 100px; height: 80px; background:
green; border: 1px solid black; position: relative; }
div.red { margin-top: 10px; width: 50px; height: 30px; background:
red; border: 1px solid black; position: relative; }
/* Following is required to show border while transferring.*/
.ui-effects-transfer { border: 2px solid black; }
</style>
</head>
<body>
<p>Click any of the squares:</p>
<div class="green"></div>
<div class="red"></div>
</body>
</html>

This will produce the following result:

Click any of the squares:

« Previous | 1 | 2 | 3 | Next »
copyright © 2014 - all rights riserved by javatechnologycenter.com