JQuery custom animation
In this article, I will explain how to use animate method using JQuery JavaScript Library.
The Jquery animate method is used to performs a custom animation of a set of CSS properties.
All jQuery effects, including .animate(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. Learn JQuery custom animation.
About JQuery custom animation
Using this method only numeric values can be animated (like "height:100px"). String values cannot be animated (like "background-color:red").
Syntax
.animate( properties [, duration] [, easing] [, complete] )
properties: A map of CSS properties that the animation will move toward.
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
complete: A function to call once the animation is complete.
Animation Properties and Values
-width, height, or left can be animated but background-color cannot be animated.
-ome non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.
-CSS properties (e.g. margin, background, border) are not supported.
Duration
Durations are given in milliseconds; higher values indicate slower animations, not faster ones..
Example:
To animate the opacity, right offset, and height of the image simultaneously:
$('#Clickme').click(function() {
$('#img1').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
});
});
$("#buttonName").click(function(){
$("#box").animate({height:"500px"});
});
Note: Use "+=" or "-=" for relative animations.
All jQuery effects, including .animate(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0.