Custom animations and effects can be added to various elements to enhance your interface using varying designs and colors.
The animate() function uses some built-in animations to animate objects in and off the view.
(selector).animate({styles},speed,easing,callback)The animate function accepts the parameters duration, easing, and callback.
The duration parameter is optional and is used to specify the speed of the hide and show effect. Its possible values are fast, slow, and milliseconds. The default is 400ms.
The easing parameter is optional and is used to specify the easing function that is to be used for the animation. The default is string.
The callback parameter too is optional and is used to specify the function that is to be called once the animation is complete.
The stop() method stops the animation of the selected element.
Its syntax is $(selector).stop(stopAll,goToEnd);
This function stops running the animation as soon as it is called. If the first parameter is set to true, this removes all the other animations for the element. If the second parameter is set to true, it quickly finishes the current animation.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> <img id="sample" src="myImage.png" alt="" width="1" height="2"> </div>
Required jQuery Code:
$( "#sample" ).hover(function() {
$( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( "img" ).stop( true, true ).fadeIn();
});The preceding sample code creates a nice fade effect without the common problem of multiple queued animations.
Elements can be set to hide and show, where hide makes the elements disappear from the eye of the user and show does the opposite.
The hide() function, if applied on an HTML element, hides it from view. This can be used in generating dynamic content based on user activity. The following is its syntax:
$(selector).hide(speed,callback);
This takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
This function is equivalent to setting the CSS property display: none for the selected element. It also saves the original display property for future use.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> </div> <img id="myImage" src="myImage.jpeg" alt="" width="1" height="2">
$( "#sample" ).click(function() {
$( "#myImage" ).hide( "slow", function() {
alert( "Animation complete." );
});
});The show() function, if applied on an HTML element, makes the hidden element visible. This can be used to control and manipulate dynamic content based on user activity, for example, making certain form options visible after a certain checkbox is selected. The following is its syntax:
$(selector).show(speed,callback);
This takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
This function removes the
display:none property from the element and reverts it to the original. For example, if an element has a property display:inline-block and was hidden using the hide function, it will set the display back to inline-block.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> </div> <img id="myImage" src="myImage.jpeg" alt="" width="1" height="2">
$( "#sample" ).click(function() {
$( "#myImage" ).Show( "slow", function() {
alert( "Animation complete." );
});
});The toggle() function, if applied on an HTML element, toggles with the visibility of that element:
$(selector).toggle(speed,callback);
This takes the speed in milliseconds and the callback function as parameters. The values taken are as follows:
FastSlowTimein milliseconds
This function is used to toggle with the visibility of the elements.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> </div> <img id="myImage" src="myImage.jpeg" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).Show( "slow", function() {
alert( "Animation complete." );
});
});Fade can be used to set the visibility of elements.
The fadeIn() function is similar to the show() function in functionality, but fadeIn() comes with a nice fading transition effect.
Its syntax is $(selector).fadeIn(speed,callback);.
This takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
This works in a similar way to the show() function but with a fade transition.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).fadeIn( "slow", function() {
// Animation complete
});
});The preceding sample code selects the div element with the sample ID and fades in the image with the
myImage ID with slow animation.
The fadeOut() function is similar to the hide() function in functionality, but it comes with a nice fading transition effect.
Its syntax is as follows: $(selector).fadeOut(speed,callback);
This takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
The fadeOut() function works in a similar way to the hide() function but with a fade transition.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).fadeOut( "fast", function() {
// Animation complete
});
});The fadeToggle() function automatically toggles an element's display property from none to block, inline, and so on.
Here is an example of its syntax:
$(selector).fadeToggle(speed,callback);
This takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
If an element is already hidden, fadeToggle() will make it visible and vice versa.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).fadeToggle( 2000, function() {
// Animation complete
});
});The fadeTo() function adjusts the opacity of the target element to the given value.
Its syntax is as follows:
$(selector).fadeTo( duration, opacity [, complete ] ) $(selector).fadeTo( duration, opacity [, easing ] [, complete ] )
This takes duration in milliseconds as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
The other parameter is opacity for the target element. The value lies between 0 and 1 and the final parameter is the callback function.
The fadeTo() function is similar to the fadeIn() method. But the user can specify the target opacity here. For example, set an element to 50% opacity by pacing 0.5 as the opacity.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).fadeTo( "Fast", 0.5, function() {
// Animation complete
});
});Sliding methods are used to slide the elements in up or down directions. The slideDown() function will make element visible, while the slideUp() function will hide the contents of the element.
The slideDown() function slides down the selected element with the specified speed.
Here is an example of its syntax:
$(selector).slideDown(speed,callback);
This this takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
The slideDown() function makes a hidden element visible with a nice sliding effect.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).slideDown( "slow", function() {
// Animation complete.
});
});The slideUp() function slides up (hides) the selected element with the specified speed.
Here is an example of its syntax:
$(selector).slideUp(speed,callback);
Takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
This function hides the selected element with a nice sliding effect in the upward direction.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
$( "#sample" ).click(function() {
$( "#myImage" ).slideUp( "fast", function() {
// Animation complete.
});
});The
slideToggle() function toggles between slideUp() and slideDown() for the selected element with the specified speed.
Here is an example of its syntax:
$(selector).slideToggle(speed,callback);
This takes speed in milliseconds and the callback function as parameters. The values taken as parameters are as follows:
FastSlowTimein milliseconds
Just as fadeToggle() switches transitions between two states, slideToggle() can slide an element up or down.
Here is an example of its usage.
Required HTML Code:
<div id="sample"> Click here </div> <img id="myImage" src="myImage.png" alt="" width="1" height="2">
Required jQuery Code:
$( "#sample" ).click(function() {
$( "#myImage" ).slideToggle( "fast", function() {
// Animation complete.
});
});