JQuery library have all the effects for adding animation user can imagine/think about like to animate, fade, toggle, show, hide and etc. All these animation have their own functions according to their job.
jQuery methods allow users to easily use these effects with minimum configuration. In other context we can show or hide any element on the page by using these effects to make better UI. These animation can be done in any event of an existing element. I have listed some of these methods including a brief description:
These methods have also some parameter to be used with e.g. speed (represents predefined speed among slow, normal and fast) and callback (optional - represent a function to be executed after animation completion). Whether the parameter is required or optional is function dependent, may be change in other definition.
$(“#button”).hide(1000); will hide the button as per the given speed
$(“#button”).show(1000); will show the button as per the given speed
Consider following code:
$(".divEmployee").toggle('slow', function(){
$(".txtMessage").text(successfully done');
});
It will show/hide the whole div tag and after completion given message will show on the element provided. Following are some examples about how to use these animation methods. Write these according to element on you page and look out the effects.
$(".divEmployee").slideDown('slow');
$(".divEmployee").slideUp('slow');
$(".divEmployee").slideToggle('slow');
The custom animation animate() method will require all the specified parameters to complete the animation. Lookout the following example of custom animation:
$( "#divEmployee" ).animate({
opacity: .25,
height: "toggle"
}, 4500, function() {
});
Run this jQuery code and check the animation, don’t forget to confirm the element id on your page. This code will shrinks the height of div to hide it. We will learn more about these effects and how this can stop by using jQuery function.
jQuery methods allow users to easily use these effects with minimum configuration. In other context we can show or hide any element on the page by using these effects to make better UI. These animation can be done in any event of an existing element. I have listed some of these methods including a brief description:
- hide(): will hide the related element.
- show(): will show related element.
- toggle(): show of hide related element. (If element is shown then it will hide)
- slideDown()/slideUp(): show or hide related element with sliding motion.
- slideToggle(): show of hide related element with sliding motion.
- animate(): this method is used for custom animation.
These methods have also some parameter to be used with e.g. speed (represents predefined speed among slow, normal and fast) and callback (optional - represent a function to be executed after animation completion). Whether the parameter is required or optional is function dependent, may be change in other definition.
$(“#button”).hide(1000); will hide the button as per the given speed
$(“#button”).show(1000); will show the button as per the given speed
Consider following code:
$(".divEmployee").toggle('slow', function(){
$(".txtMessage").text(successfully done');
});
It will show/hide the whole div tag and after completion given message will show on the element provided. Following are some examples about how to use these animation methods. Write these according to element on you page and look out the effects.
$(".divEmployee").slideDown('slow');
$(".divEmployee").slideUp('slow');
$(".divEmployee").slideToggle('slow');
The custom animation animate() method will require all the specified parameters to complete the animation. Lookout the following example of custom animation:
$( "#divEmployee" ).animate({
opacity: .25,
height: "toggle"
}, 4500, function() {
});
Run this jQuery code and check the animation, don’t forget to confirm the element id on your page. This code will shrinks the height of div to hide it. We will learn more about these effects and how this can stop by using jQuery function.