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>
<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.
RECOMMENDED: Understanding JQuery Effect Methods
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>
<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.
RECOMMENDED: The Ultimate Guide to JQuery AJAX
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>
<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>
<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.
RECOMMENDED: JQuery Event Methods with examples
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>
<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>
<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>
<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>
<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.
RECOMMENDED: The Complete List of Selectors in jQuery
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>
<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>
<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>
<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>
<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>
<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>
<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.
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.