当前位置: 代码迷 >> Web前端 >> jQuery animate()步骤详解、实例、扩展(详细版)
  详细解决方案

jQuery animate()步骤详解、实例、扩展(详细版)

热度:632   发布时间:2013-09-05 16:02:06.0
jQuery animate()方法详解、实例、扩展(详细版)

一、语法

先看看官方文档怎么写的。

参考:http://www.w3school.com.cn/jquery/effect_animate.asp

语法 1

$(selector).animate(styles,speed,easing,callback)
参数 描述
styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值(提供实例):

  • 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

注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

speed

可选。规定动画的速度。默认是 "normal"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"
easing

可选。规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数:

  • swing
  • linear

扩展插件中提供更多 easing 函数。

callback

可选。animate 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

语法 2

$(selector).animate(styles,options)
参数 描述
styles 必需。规定产生动画效果的 CSS 样式和值(同上)。
options

可选。规定动画的额外选项。

可能的值:

  • speed - 设置动画的速度
  • easing - 规定要使用的 easing 函数
  • callback - 规定动画完成之后要执行的函数
  • step - 规定动画的每一步完成之后要执行的函数
  • queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
  • specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

二、实例

先来个官方最简单的:

$("#btn1").click(function(){
  $("#box").animate({height:"300px"});
});
解析:$("#btn1").click    点击 id="btn1" 的元素时,执行动画

$("#box").animate({height:"300px"});   给 id="box" 的元素定义了一个动画,速度等其他参数默认,样式是  height 变成 300px

调试地址

再来个变化后的全参数版本:

$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"},3500,"linear",ShowMsg());
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});

//回调函数
function ShowMsg(){
  alert("执行完毕!");
}

解析:$("#box").animate({height:"300px"},3500,"linear",ShowMsg());   height:"300px"表示样式;3500 动画时间(毫秒);

"linear"表示效果,通常使用插件进行效果扩展,推荐:jquery.easing

ShowMsg() 回调函数,这个参数比较有用,可以用来控制多个动画的顺序,详细用法参见:jQuery Callback


再看下多个属性一起改变:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',//透明度
    height:'150px',
    width:'150px'
  });
});

解析:多个属性可以用逗号隔开一起写,动画中会一起改变

官方调试地址


注意:这些属性和css属性几乎一样,但是并不是css属性,所以书写时要特别注意。

例如:必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。


那如果要改变的只是一个增加值怎么处理呢:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

官方调试地址


再看一个不常用但是有意思的用法:

$("button").click(function(){
  $("div").animate({
    height:'toggle'  //可以使用: "show"、"hide" 或 "toggle"
  });
});
官方调试地址

最重要的一个功能来了:队列动画

前面我们演示多个属性一起变,那一定会有多个属性按照顺序一个个执行,就可以做出连续的动画。

上例子:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
官方调试地址

再看一个对比:

animate({left:"+=50px", top:"50px"}, 300)                                           //同时改变
animate({left:"+=50px"}, 300).animate({height:"+=50px", 340})                       //队列改变

发散一下,我们也可以使用回调函数一个个调方法

animate({left:"+=50px", 300, 
	function (){
		$(this).css("background-color","red")
}}).animate(...);

先执行第一个animate,再执行回调中的css(),最后执行第二个animate();


还有一些常用动画可以直接调用:

show()和hide()
如果加入毫秒数参数,则是同时修改高度、宽度、以及不透明度。
fadeIn()和fadeOut()
只是改变不透明度。
slideUp()和slideDown()
只改变高度。
fadeTo()
只改变不透明度至某一值。
toggle()                                  //显示
slideToggle()                          //高度


三、扩展

如果一个动画还没执行完就要执行新的动画怎么处理呢?

停止动画:

语法

$(selector).stop(stopAll,goToEnd)
参数 描述
stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。


上例子:

$("#stop").click(function(){
  $("#box").stop();
});

官方调试地址

同样,停止队列动画:

$("#box").stop(true);

动画执行完成停止队列动画:

$("#box").stop(true,true);


区别:队列动画是多个小动画连接成的, 
stop(true)
是停止在当前状态,即立即停止

stop(true,true)
是执行完当前的小动画后停止执行后面的动画


直接跳到动画结尾:

$("#box").stop(true,false);

实际问题:

一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏


如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。
 
解决方法:在写动画效果的代码前加入stop(true,true),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)



有时候点击很快时,会造成动画积累,这是就用到一个方法:

$(this).is(":animated")











  相关解决方案