Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be looking at the various effects that can be achieved using JQuery.
JQuery provides a simple interface to do all kinds of amazing effects. JQuery methods lets us to quickly apply the commonly used effects with a minimum configuration.
JQuery provides a simple interface to do all kinds of amazing effects. JQuery methods lets us to quickly apply the commonly used effects with a minimum configuration.
Showing and Hiding Elements
JQuery command for showing and hiding elements are fairly what we would expect - show() method to show the element in a wrapped set and hide() method to hide them.
Syntax
The following below is the syntax for a show( ) method -
[selector].show( speed, [callback] );
Parameter Details
Below is the description of all the parameters -
- speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
- callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.
Following below is the syntax for hide() method.
[selector].hide( speed, [callback] );
Parameter Details
Below is the description of all the parameters -
- speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
- callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.
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">
$( document ).ready( function( ) {
$( "#show" ).click( function( ) {
$( ".mydiv" ).show( 2000 );
} );
$( "#hide" ).click( function( ) {
$( ".mydiv" ).hide( 2000 );
} );
} );
</script>
<style>
.mydiv {
margin: 10px;
padding: 10px;
border: 3px solid #666;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class = "mydiv">
This is a Square
</div>
<input type = "button" id = "show" value = "Show" />
<input type = "button" Id = "hide" value = "Hide" />
</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">
$( document ).ready( function( ) {
$( "#show" ).click( function( ) {
$( ".mydiv" ).show( 2000 );
} );
$( "#hide" ).click( function( ) {
$( ".mydiv" ).hide( 2000 );
} );
} );
</script>
<style>
.mydiv {
margin: 10px;
padding: 10px;
border: 3px solid #666;
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div class = "mydiv">
This is a Square
</div>
<input type = "button" id = "show" value = "Show" />
<input type = "button" Id = "hide" value = "Hide" />
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED: A Complete Guide to JQuery AJAX Event Methods
toggling the Elements
JQuery provides the methods for toggling display state of elements between revealed or hidden. If the element is initially displayed, it will become hidden; if hidden, then it will become visible.
Syntax
Below is the syntax for a toggle( ) method -
[selector].toggle( [speed] [, callback] );
Parameter Details
Below is the description of all the parameters -
- speed - This parameter is a string that represents one of the three predefined speeds, i.e.,("slow", "normal", or "fast" or number of milliseconds to run the animation eg (1000).
- callback - This parameter (callback) is optional and it represents a function that is to be executed whenever the animation completes.
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">
$( document ).ready( function( ) {
$( ".clickme" ).click( function( event ) {
$( ".target" ).toggle( 'slow', function( ) {
$( ".log" ).text( 'Transition Complete' );
} );
} );
} );
</script>
<style>
.clickme {
margin: 10px;
padding: 10px;
border: 3px solid #666;
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<div class = "content">
<div class = "clickme">Click Me</div>
<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>
<div class = "log"></div>
</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">
$( document ).ready( function( ) {
$( ".clickme" ).click( function( event ) {
$( ".target" ).toggle( 'slow', function( ) {
$( ".log" ).text( 'Transition Complete' );
} );
} );
} );
</script>
<style>
.clickme {
margin: 10px;
padding: 10px;
border: 3px solid #666;
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<div class = "content">
<div class = "clickme">Click Me</div>
<div class = "target">
<img src = "./images/query.jpg" alt = "JQuery" />
</div>
<div class = "log"></div>
</div>
</body>
</html>
You can try the above code out to see the result for yourselves.
RECOMMENDED: JQuery AJAX Methods
JQuery Effect Methods
The following below is a list of the most important methods in jQuery used for creating different kinds of effects -
| Sr.No. | Methods & Description |
|---|---|
| 1 | animate( params, [duration, easing, callback] )
A function for making custom animations.
|
| 2 | fadeIn( speed, [callback] )
Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
|
| 3 | fadeOut( 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.
|
| 4 | fadeTo( speed, opacity, callback )
Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
|
| 5 | hide( )
Hides each of the set of matched elements if they are shown.
|
| 6 | hide( speed, [callback] )
Hide all matched elements using a graceful animation and firing an optional callback after completion.
|
| 7 | show( )
Displays each of the set of matched elements if they are hidden.
|
| 8 | show( speed, [callback] )
Show all matched elements using a graceful animation and firing an optional callback after completion.
|
| 9 | slideDown( speed, [callback] )
Reveal all matched elements by adjusting their height and firing an optional callback after completion.
|
| 10 | slideToggle( speed, [callback] )
Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
|
| 11 | slideUp( speed, [callback] )
Hide all matched elements by adjusting their height and firing an optional callback after completion.
|
| 12 | stop( [clearQueue, gotoEnd ])
Stops all the currently running animations on all the specified elements.
|
| 13 | toggle( )
Toggle displaying each of the set of matched elements.
|
| 14 | toggle( speed, [callback] )
Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
|
| 15 | toggle( switch )
Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
|
| 16 | jQuery.fx.off
Globally disable all animations.
|
In our next tutorial post, we will be discussing about the above listed methods.
RECOMMENDED POST: Understanding jQuery Selectors with proper examples
UI Library Based Effects
To make use of these effects, you can either download latest jQuery UI Library straight from JQuery UI Library or use Google's CDN to use it in a very similar way as we have done for jQuery.
We can use the Google CDN for jQuery UI using the following code snippet in the HTML page -
We can use the Google CDN for jQuery UI using the following code snippet in the HTML page -
<head>
<script scr = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
<script scr = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</head>
| Sr.No. | Methods & Description |
|---|---|
| 1 | Blind
Blinds the element away or shows it by blinding it in.
|
| 2 | Bounce
Bounces the element vertically or horizontally n-times.
|
| 3 | Clip
Clips the element on or off, vertically or horizontally.
|
| 4 | Drop
Drops the element away or shows it by dropping it in.
|
| 5 | Explode
Explodes the element into multiple pieces.
|
| 6 | Fold
Folds the element like a piece of paper.
|
| 7 | Highlight
Highlights the background with a defined color.
|
| 8 | Puff
Scale and fade out animations create the puff effect.
|
| 9 | Pulsate
Pulsates the opacity of the element multiple times.
|
| 10 | Scale
Shrink or grow an element by a percentage factor.
|
| 11 | Shake
Shakes the element vertically or horizontally n-times.
|
| 12 | Size
Resize an element to a specified width and height.
|
| 13 | Slide
Slides the element out of the viewport.
|
| 14 | Transfer
Transfers the outline of an element to another.
|
In our subsequent tutorial guides, we are going to be studying about the above listed methods.
Do feel free to ask your questions where necessary and i will attend to them as soon as possible.
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.
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.