JQuery动画

JQuery动画

1、隐藏和显示
show():对应js中的display:block;
hide():对应js中的display:none;

语法：（参数可有可无）
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

例子：
$('p:last').show(3000, function () { $('a').text('隐藏'); });

jQuery toggle()事件

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
语法：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

2、滑动效果

slideUp和slideDown：看看和hide和show有什么不同
slideToggle事件
这一部分和前面的show,hide,toggle用法基本一样

3、淡入淡出
通过渐渐变换背景色的方式来隐藏和显示元素
其实前边的show ,hide,slideDown,slideUp和本章的技术都是隐藏和显示元素，而且用法一样
show,hide：同时改变元素的宽度和高度
slideDown,slideUp：改变元素的高度
fadeIn,fadeOut:改变元素的背景色（透明度值为0.0-1.0）

fadeIn:是淡入：即元素从无到有
fadeOut:是淡出：即元素从有到无
fadeTo:将元素的不透明度定位到某个值

4、动画
animate:自定义动画效果
animate(params,[duration],[easing],[callback])
 params表示用于制作动画效果的属性样式和值的集合
 duration:表示三种默认速度字符："show"、"hide" 或 "toggle";也可以是数字
 easing:动画插件
 callback:动画执行完成后回调的函数

如果要移动位置:设置top和left属性的值
注意：如果想移动一个元素，就应该为其设置初始位置值，也就是设置其position属性的值为relative或者absolute

可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用

paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例 1

隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：

$("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");});

 

5、停止
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止当前活动的动画，

允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

 

6、延迟
$('img').delay(2000).slideToggle(3000);：延迟2000毫秒后继续执行事件

7、对于同一个元素可以经行多个命令，如下：

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);