jQuery for Animation: animate() function With Example
jQuery animate() Method
Use the jQuery animate()
function to create custom animations.
Syntax for jQuery animate method
$(selector).animate({params},speed,callback);
The needed params parameter specifies the animated CSS properties.
The duration of the effect is determined by the speed parameter, which is optional. It has three possible values: "slow"
, "rapid"
, or milliseconds.
The optional callback parameter specifies a function that will run once the animation has finished.
The animation()
method is demonstrated in the following example, which moves a
Example of animated jQuery method
$("button").click(function(){
$("div").animate({left: '250px'});
});
BY default, all HTML elements have a fixed location and cannot be moved.
Remember to set the CSS position property of the element to a relative, fixed, or absolute before manipulating the position!
Manipulating Multiple Properties in jQuery
It's worth noting that you can animate many properties at the same time:
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});