Hello dear readers! Welcome back to another edition of our tutorial on JQuery. In this tutorial post, we will be looking at the various JQuery UI Library based effects.

Blind Effect Method

Blind Effect Method can be used with show/hide/toggle. This blinds the element away or will show it by blinding it in.

Syntax

The following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

direction - Its the direction of the effect. It can be vertical or horizontal. The default is vertical.

mode - Mode of the effect. It can be hide or show. Default is hide.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/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: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Bounce Effect Method

The Bounce Effect Method can be used with effect() method. What it does is that, it bounces elements multiple times, either vertically or horizontally.

Syntax

The following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

direction - Direction of the effect. It can be right, left, up, down. Default is up.

distance - The distance to bounce. Default is 20.

mode - Mode of the effect. It can be hide, show, or effect. Default is effect.

times - The number of times to bounce. Default is 5.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">

</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#button" ).click( function( ) {
$( ".target" ).effect( "bounce", { times: 3 }, 300 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on the buttons below:</p>

<button id = "button">Bounce</button>

<div class = "target">
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Clip Effect Method

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

Syntax

The following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

direction - Its the direction of the effect. It can be vertical or horizontal. The default is vertical.

mode - Mode of the effect. It can be hide or show. Default is hide.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#hide" ).click( function( ) {
$( ".target" ).hide( "clip", { direction: "horizontal" }, 1000 );
} );

$( "#show" ).click( function( ) {
$( ".target" ).show( "clip", { direction: "horizontal" }, 1000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Drop Effect Method

Drop Effect Method can be used with show/hide/toggle. This drops the element away or displays it by dropping it on.

Syntax

The following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

direction - Direction of the effect. It can be up, down, left, right. Default is left.

mode - Mode of the effect. It can be hide or show. Default is hide.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/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: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Explode( ) Method

The Explode( ) effect can be made use of with show/hide/toggle. This will explode or implode elements into/from many pieces.

Syntax

The following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

pieces - Number of pieces to be exploded to or imploded from.

mode - Mode of the effect. It can be hide or show. Default is hide.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#hide" ).click( function( ) {
$( ".target" ).hide( "explode", { pieces: 16 }, 1000 );
} );

$( "#show" ).click( function( ) {
$( ".target" ).show( "explode", { pieces: 16 }, 1000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Fold( ) Method

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

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Following below is the description of all the parameters -

horizFirst - Whether to fold horizontally first or not. It can be true or false. Default is false.

mode - Mode of the effect. It can be hide or show. Default is hide.

size - The size to be folded to. Default is 15.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#hide" ).click( function( ) {
$( ".target" ).hide( "fold", { horizFirst: true }, 1000 );
} );

$( "#show" ).click( function( ) {
$( ".target" ).show( "fold", { horizFirst: true }, 1000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Hightlight Effect Method

The Highlight Effect Method can be used with the effect(). This will highlight the element background with a specific color. The Default is yellow.

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

color - The highlight color. Default is yellow.

mode - Mode of the effect. Could be show, hide. Default is show.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">

</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#button" ).click( function( ) {
$( ".target" ).effect( "highlight", { color: "#669966" }, 3000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on the buttons below:</p>

<button id = "button">Highlight</button>

<div class = "target"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

puff( ) Method

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

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

mode - Mode of the effect. It can be hide or show. Default is hide.

percentage - Percentage to scale to. Default is 150

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/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: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Pulsate Effect Method

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

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

times - Times to pulsate. Default is 3.

mode - This is the mode of the effect. It could be show, hide. Default is show.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">

</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#button" ).click( function( ) {
$( ".target" ).effect( "pulsate", { times: 6 }, 3000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on the buttons below:</p>

<button id = "button">Pulsate</button>

<div class = "target"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Scale( ) Method

The Scale( ) effect Method can be used with show/hide/toggle. This shrinks or will grow an element by a percentage factor.

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

direction - The direction of the effect. It can be either vertical or horizontal. Default is both.

from - State at beginning, usually not needed. It would be an object and will also be given in form of { height:..., width:... }.

origin - The vanishing point. It is an array and by default set to ['middle', 'center'].

percentage - Percentage to scale to. Default is 0/1000.

scale - Areas of the element that is to be resized; both, box, content. Box resizes the border and also padding of the element. Content resizes any content of the element. Default is both.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/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: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

RECOMMENDED: An Introduction to JQuery

Shake Effect Method

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

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

times - The number of times to pulsate. Default is 3.

Distance - The distance to shake. Default is 20.

direction - Its the direction of the effect. Can be up, down, right, left. Default is left.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">

</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#button" ).click( function( ) {
$( ".target" ).effect( "shake", { times: 6 }, 3000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on the buttons below:</p>

<button id = "button">Shake</button>

<div class = "target"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Size Effect Method

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

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

from - State at beginning, usually not needed. This an object in the form of {height: .., width:..}

to - The height and width to resize to. This an object in form of {height: ......, width: .....}

origin - The vanishing point, default for show/hide. This is an array and the default will be ['middle', 'center'].

scale - Area of the element to be resized by the method: both, box, content. The box resizes border and padding of the element. The content resizes any content inside of the element. Both is default.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">

</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#big" ).click( function( ) {
$( ".target" ).effect( "size", { to: { width: 200, height: 200 } }, 2000 );
} );

$( "#small" ).click( function( ) {
$( ".target" ).effect( "size" , { to: { width: 10, height: 10 } }, 2000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
div { width: 100px; height: 100px; background: green; }
</style>

</head>

<body>

<p>Click on the buttons below:</p>

<button id = "big">Big</button>
<button id = "small">Small</button>

<div class = "target"></div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Slide Effect Method

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

Syntax

Following below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

direction - The direction of the effect. This can be up, down, left, right. Default is left.

mode - Mode of the effect. It can be hide or show. Default is show.

distance. - Its the distance of the effect. It is set to either the height or width of the element depending on the direction option.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "#hide" ).click( function( ) {
$( ".target" ).hide( "slide", { direction: "down" }, 1000 );
} );

$( "#show" ).click( function( ) {
$( ".target" ).show( "slide", { direction: "up" }, 1000 );
} );
} );
</script>

<style>
p { background-color: #666; width: 200px; border: 1px solid green;  }
</style>

</head>

<body>

<p>Click on any of the buttons below:</p>

<button id = "hide">Hide</button>
<button id = "show">Show</button>

<div class = "target">
</div>

</body>
</html>

You can try the above code out to see the result for yourselves.

Transfer Effect Method

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

Syntax

Below is the syntax to use this method -

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

Parameter Details

Below is the description of all the parameters -

className - Optional class name the transfer element will receive.

to - JQuery selectors, the element to transfer to.

Example

Below is a short example on how to implement this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">

</script>

<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {

$( "div" ).click( function( ) {
var i = 1 - $( "div" ).index( this );
$( this ).effect( "transfer" , { to: $( "div" ).eq( 1 ) }, 1000 );
} );
} );
</script>

<style>
div.green { margin: 0px; width: 100px; height: 60px; background: green;
border: 2px solid black; position: relative; }

div.red { margin-top: 10px; width: 50px; height: 30px; background: red;
border: 2px solid black; position: relative; }

/* Code below is required to show border while transferring. */
.ui-effects-transfer { border : 2px solid black; }

</style>

</head>

<body>

<p>Click on the buttons below:</p>

<button id = "green"></button>
<button id = "red"></button>

</body>
</html>

You can try the above code out to see the result for yourselves.

Alright guys! This is where we are rounding up for this tutorial post. In our next tutorial guide, we are going to be dropping you guys with the complete list of the jQuery UI interactions.

Do feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

JQuery UI Library Based Methods

Blind Effect Method

Syntax

Parameter Details

Example

Bounce Effect Method

Syntax

Parameter Details

Example

Clip Effect Method

Syntax

Parameter Details

Example

Drop Effect Method

Syntax

Parameter Details

Example

Explode( ) Method

Syntax

Parameter Details

Example

Fold( ) Method

Syntax

Parameter Details

Example

Hightlight Effect Method

Syntax

Parameter Details

Example

puff( ) Method

Syntax

Parameter Details

Example

Pulsate Effect Method

Syntax

Parameter Details

Example

Scale( ) Method

Syntax

Parameter Details

Example

Shake Effect Method

Syntax

Parameter Details

Example

Size Effect Method

Syntax

Parameter Details

Example

Slide Effect Method

Syntax

Parameter Details

Example

Transfer Effect Method

Syntax

Parameter Details

Example

Post a Comment

Get new posts by email: