jQuery API jQuery API 中英文对照版 - jQuery在线查询手册
animate(params, speed, easing, callback)
animate(params,speed,easing,callback)

用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

返回值:jQuery

参数:

  • params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
  • easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
  • callback (Function): (可选) 在动画完成时执行的函数
 

示例:

$("p").animate({ height: 'toggle', opacity: 'toggle' },   "slow"); 

示例:

$("p").animate({ left: 50, opacity: 'show' },   500); 
示例:

一个使用“擦除”函数提供不同动画样式的例子。只有在一个插件可以提供这个“擦除”函数(jQuery库中默认只提供“linear”函数)的情况下才有效。

$("p").animate({ opacity: 'show' }, "slow",   "easein"); 
 
animate( params, speed, easing, callback )

A function for making your own, custom animations. The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: "height", "top", or "opacity").

Note that properties should be specified using camel case eg. marginLeft instead of margin-left.

The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string "hide", "show", or "toggle" is provided, a default animation will be constructed for that property.

Return value: jQuery
Parameters:

  • params (Hash): A set of style attributes that you wish to animate, and to what end.
  • speed (String|Number): (optional) A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
  • easing (String): (optional) The name of the easing effect that you want to use (Plugin Required).
  • callback (Function): (optional) A function to be executed whenever the animation completes, executes once for each element animated against. This function is passed a single parameter, the element that was being animated.
 

Example:

 $("p").animate({     height: 'toggle', opacity: 'toggle'   }, "slow");  

Example:

 $("p").animate({     left: 50, opacity: 'show'   }, 500);  

Example:

An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function (Only 'linear' is provided by default, with jQuery).

 $("p").animate({     opacity: 'show'   }, "slow", "easein");