返回值:jQueryanimate(params, [duration], [easing], [callback])

概述

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 

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

在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

参数

paramsOptions

一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number

三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing (可选)String

要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)Function

在动画完成时执行的函数

示例

描述:

点击按钮后div元素的几个不同属性一同变化

HTML 代码:
<button id="go"> Run</button>
<div id="block">Hello!</div>
jQuery 代码:
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

描述:

让指定元素左右移动

HTML 代码:
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
jQuery 代码:
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-50px'}, "slow");
});

描述:

在600毫秒内切换段落的高度和透明度

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

描述:

用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

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

描述:

一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。

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

目录 索引

输入要查找的关键字:

#id*.class:animated:button:checkbox:checked:contains:disabled:empty:enabled:eq:even:file:first-child:first:gt:has:header:hidden:hidden:image:input:last-child:last:lt:not:nth-child:odd:only-child:parent:password:radio:reset:selected:submit:text:visible[attrSel1][attrSel2][attrSelN][attribute!=value][attribute$=value][attribute*=value][attribute=value][attribute][attributeadd(expr, [context])addClass(class)addClass(function(index, class))after(content)after(function)ajaxComplete(callback)ajaxError(callback)ajaxSend(callback)ajaxStart(callback)ajaxStop(callback)ajaxSuccess(callback)ancestor descendantandSelf()animate(param,[dur],[e],[fn])animate(params, options)append(content)append(function(index, html))appendTo(content)attr(key, fn)attr(key, value)attr(name)attr(properties)before(content)before(function)bind(type, [data], fn)blur()blur(fn)change()change(fn)children([expr])clearQueue([queueName])click()click(fn)clone()clone(true)closest([expr])contents()contextcss(name)css(name, function(index, value))css(name, value)css(properties)data([name])data(name, value)data(obj)dblclick()dblclick(fn)delay(duration, [queueName])dequeue(name)detach([expr])die([type], [fn])each(callback)elementempty()end()eq(index)error()error(fn)fadeIn(speed, [callback])fadeOut(speed, [callback])fadeTo(speed, opacity, [fn])filter(expr)filter(fn)find(expr)first()focus()focus(fn)focusin( [fn] )focusout( [fn] )get()get(index)has(expr)hasClass(class)height()height(val)hide()hide(speed, [callback])hover(over, out)html()html(function(index, html))html(val)index(subject)innerHeight()innerWidth()insertAfter(content)insertBefore(content)is(expr)jQuery()jQuery(callback)jQuery(elements)jQuery(expr, [context])jQuery(html, [ownerDoc])jQuery(html, props)jQuery.ajax([options])jQuery.ajaxSetup([options])jQuery.boxModeljQuery.browser.versionjQuery.browserjQuery.contains(container, contained)jQuery.data([element], [key])jQuery.data(element, key, val)jQuery.each(object, [callback])jQuery.error(message)jQuery.extend([d],tgt,obj1,[objN])jQuery.extend(object)jQuery.fn.extend(object)jQuery.fx.offjQuery.get(url, [data], [fn], [type])jQuery.getJSON(url, [data], [fn])jQuery.getScript(url, [callback])jQuery.grep(array, fn, [invert])jQuery.inArray(value, array)jQuery.isArray(obj)jQuery.isEmptyObject(obj)jQuery.isFunction(obj)jQuery.isPlainObject(obj)jQuery.makeArray(obj)jQuery.map(array, callback)jQuery.merge(first, second)jQuery.noConflict()jQuery.noConflict(extreme)jQuery.noopjQuery.param(obj, [traditional])jQuery.parseJSON(json)jQuery.post(url, [data], [fn], [type])jQuery.proxy(function, scope)jQuery.supportjQuery.toArray()jQuery.trim(str)jQuery.unique(array)keydown()keydown(fn)keypress()keypress(fn)keyup()keyup(fn)last()lengthlive(type, [data], fn)load(url, [data], [callback])map(callback)mousedown(fn)mousemove(fn)mouseout(fn)mouseover(fn)mouseup(fn)next([expr])nextAll([expr])nextUntil([expr])not(expr)offset(coordinates)offsetParent()offsetone(type, [data], fn)outerHeight(options)outerWidth(options)parent > childparent([expr])parents([expr])parentsUntil([expr])position()prepend(content)prepend(function(index, html))prependTo(content)prev + nextprev ~ siblingsprev([expr])prevAll([expr])prevUntil([expr])queue(name ,callback)queue(name)queue(name, queue)ready(fn)remove([expr])removeAttr(name)removeClass(class | fn])removeClass(class)removeData(name)replaceAll(selector)replaceWith(content)resize(fn)scroll(fn)scrollLeft()scrollLeft(val)scrollTop()scrollTop(val)select()select(fn)selector1,selector2,selectorNselectorserialize()serializeArray()show()show(speed, [callback])siblings([expr])size()slice(start, [end])slideDown(speed, [callback])slideToggle(speed, [callback])slideUp(speed, [callback])stop([clearQueue], [gotoEnd])submit()submit(fn)text()text(function(index, text))text(val)toggle()toggle(fn, fn2, [fn3, fn4, ...])toggle(speed, [callback])toggle(switch)toggleClass(class)toggleClass(class, switch)toggleClass(function(index, class), [switch])trigger(type, [data])triggerHandler(type, [data])unbind([type], [data])unload(fn)unwrap()val()val(array)val(function(index, value))val(val)width()width(val)wrap(elem)wrap(fn)wrap(html)wrapAll(elem)wrapAll(html)wrapInner(elem)wrapInner(fn)wrapInner(html)
#id*.class:animated:button:checkbox:checked:contains:disabled:empty:enabled:eq:even:file:first-child:first:gt:has:header:hidden:hidden:image:input:last-child:last:lt:not:nth-child:odd:only-child:parent:password:radio:reset:selected:submit:text:visible[attrSel1][attrSel2][attrSelN][attribute!=value][attribute$=value][attribute*=value][attribute=value][attribute][attributeadd(expr, [context])addClass(class)addClass(function(index, class))after(content)after(function)ajaxComplete(callback)ajaxError(callback)ajaxSend(callback)ajaxStart(callback)ajaxStop(callback)ajaxSuccess(callback)ancestor descendantandSelf()animate(param,[dur],[e],[fn])animate(params, options)append(content)append(function(index, html))appendTo(content)attr(key, fn)attr(key, value)attr(name)attr(properties)before(content)before(function)bind(type, [data], fn)blur()blur(fn)change()change(fn)children([expr])clearQueue([queueName])click()click(fn)clone()clone(true)closest([expr])contents()contextcss(name)css(name, function(index, value))css(name, value)css(properties)data([name])data(name, value)data(obj)dblclick()dblclick(fn)delay(duration, [queueName])dequeue(name)detach([expr])die([type], [fn])each(callback)elementempty()end()eq(index)error()error(fn)fadeIn(speed, [callback])fadeOut(speed, [callback])fadeTo(speed, opacity, [fn])filter(expr)filter(fn)find(expr)first()focus()focus(fn)focusin( [fn] )focusout( [fn] )get()get(index)has(expr)hasClass(class)height()height(val)hide()hide(speed, [callback])hover(over, out)html()html(function(index, html))html(val)index(subject)innerHeight()innerWidth()insertAfter(content)insertBefore(content)is(expr)jQuery()jQuery(callback)jQuery(elements)jQuery(expr, [context])jQuery(html, [ownerDoc])jQuery(html, props)jQuery.ajax([options])jQuery.ajaxSetup([options])jQuery.boxModeljQuery.browser.versionjQuery.browserjQuery.contains(container, contained)jQuery.data([element], [key])jQuery.data(element, key, val)jQuery.each(object, [callback])jQuery.error(message)jQuery.extend([d],tgt,obj1,[objN])jQuery.extend(object)jQuery.fn.extend(object)jQuery.fx.offjQuery.get(url, [data], [fn], [type])jQuery.getJSON(url, [data], [fn])jQuery.getScript(url, [callback])jQuery.grep(array, fn, [invert])jQuery.inArray(value, array)jQuery.isArray(obj)jQuery.isEmptyObject(obj)jQuery.isFunction(obj)jQuery.isPlainObject(obj)jQuery.makeArray(obj)jQuery.map(array, callback)jQuery.merge(first, second)jQuery.noConflict()jQuery.noConflict(extreme)jQuery.noopjQuery.param(obj, [traditional])jQuery.parseJSON(json)jQuery.post(url, [data], [fn], [type])jQuery.proxy(function, scope)jQuery.supportjQuery.toArray()jQuery.trim(str)jQuery.unique(array)keydown()keydown(fn)keypress()keypress(fn)keyup()keyup(fn)last()lengthlive(type, [data], fn)load(url, [data], [callback])map(callback)mousedown(fn)mousemove(fn)mouseout(fn)mouseover(fn)mouseup(fn)next([expr])nextAll([expr])nextUntil([expr])not(expr)offset(coordinates)offsetParent()offsetone(type, [data], fn)outerHeight(options)outerWidth(options)parent > childparent([expr])parents([expr])parentsUntil([expr])position()prepend(content)prepend(function(index, html))prependTo(content)prev + nextprev ~ siblingsprev([expr])prevAll([expr])prevUntil([expr])queue(name ,callback)queue(name)queue(name, queue)ready(fn)remove([expr])removeAttr(name)removeClass(class | fn])removeClass(class)removeData(name)replaceAll(selector)replaceWith(content)resize(fn)scroll(fn)scrollLeft()scrollLeft(val)scrollTop()scrollTop(val)select()select(fn)selector1,selector2,selectorNselectorserialize()serializeArray()show()show(speed, [callback])siblings([expr])size()slice(start, [end])slideDown(speed, [callback])slideToggle(speed, [callback])slideUp(speed, [callback])stop([clearQueue], [gotoEnd])submit()submit(fn)text()text(function(index, text))text(val)toggle()toggle(fn, fn2, [fn3, fn4, ...])toggle(speed, [callback])toggle(switch)toggleClass(class)toggleClass(class, switch)toggleClass(function(index, class), [switch])trigger(type, [data])triggerHandler(type, [data])unbind([type], [data])unload(fn)unwrap()val()val(array)val(function(index, value))val(val)width()width(val)wrap(elem)wrap(fn)wrap(html)wrapAll(elem)wrapAll(html)wrapInner(elem)wrapInner(fn)wrapInner(html)