jQuery Tutorial

jQuery Quiz

"Animate" a div element, by changing its height:

$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});

The animate() method performs a custom animation of a set of CSS properties.

This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red").

Note: Use "+=" or "-=" for relative animations.

(selector).animate({styles},speed,easing,callback)

Parameter	Description
styles	Required. Specifies one or more CSS properties to animate, and the values to animate to. Note: The styles are set with DOM names (like "fontSize"), not CSS names (like "font-size"). The possible CSS style values are: backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent
speed	Optional. Specifies the speed of the animation. Default is "normal" Possible values: milliseconds (like 1500) "slow" "normal" "fast"
easing	Optional. Specifies an easing function that sets the speed in different points of the animation. Built-in easing functions are: swing linear More easing functions are available in external plugins.
callback	Optional. A function to be executed after the animation completes. To learn more about callback, visit our jQuery Callback chapter.

(selector).animate({styles},{options})

Parameter	Description
styles	Required. Specifies one or more CSS properties to animate, and the values to animate to (See possible values above)
options	Optional. Specifies additional options for the animation. Possible values: speed - set the speed of the animation easing - specify the easing function to use callback - specifies a function to be executed after the animation completes step - specifies a function to be executed after each step in the animation queue - a Boolean value specifying whether or not to place the animation in the effects cue specialEasing - a map of one or more CSS properties from the styles parameter, and their corresponding easing functions

Parameter

Description

styles

Required. Specifies one or more CSS properties to animate, and the values to animate to (See possible values above)

options

Optional. Specifies additional options for the animation.

Possible values:

speed - set the speed of the animation
easing - specify the easing function to use
callback - specifies a function to be executed after the animation completes
step - specifies a function to be executed after each step in the animation
queue - a Boolean value specifying whether or not to place the animation in the effects cue
specialEasing - a map of one or more CSS properties from the styles parameter, and their corresponding easing functions

WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER

W3SCHOOLS EXAMS
Get Certified in: HTML, CSS, JavaScript, XML, PHP, and ASP

W3SCHOOLS BOOKS
New Books: HTML, CSS JavaScript, and Ajax

STATISTICS
Browser Statistics Browser OS Browser Display

SHARE THIS PAGE
Share with »