jquery动画

2014-08-07 08:41

基本动画

show()

显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

返回值:jQuery

}         示例

显示所有段落

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show()

show(speed,[callback])

以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

返回值:jQuery

参数

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

callback (Function) : (Optional) 在动画完成时执行的函数,每个元素执行一次。

示例

用缓慢的动画将隐藏的段落显示出来,历时600毫秒。

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("slow");

用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });

将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。

}         HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show(4000,function(){
   $(this).text("Animation Done...");
 });

hide()

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

返回值:jQuery

示例

隐藏所有段落

jQuery 代码:

$("p").hide()

hide(speed,[callback])

以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

返回值:jQuery

参数

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

callback (FunctionFunction) : (Optional) 在动画完成时执行的函数,每个元素执行一次。

示例

600毫秒的时间将段落缓慢的隐藏

jQuery 代码:

$("p").hide("slow");

200毫秒将段落迅速隐藏,之后弹出一个对话框。

jQuery 代码:

$("p").hide("fast",function(){
   alert("Animation Done.");
 });

toggle()

切换元素的可见状态。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

返回值:jQuery

示例

切换所有段落的可见状态。

HTML 代码:

<p>Hello</p><p style="display: none">Hello Again</p>

jQuery 代码:

$("p").toggle()

结果:

<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

 

 

jQuery中的滑动

slideDown(speed,[callback])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以滑动的方式显示出来。

返回值:jQuery

参数

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

callback (FunctionFunction) : (可选) 在动画完成时执行的函数

示例

600毫秒缓慢的将段落滑下

jQuery 代码:

$("p").slideDown("slow");

200毫秒快速将段落滑下,之后弹出一个对话框

<p style="display: none;width:200px;height:200px;background-color:Red;">Hello</p>

jQuery 代码:

}         $("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

slideUp(speed,[callback])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以滑动的方式隐藏起来。

返回值:jQuery

参数

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

callback (Function) : (可选) 在动画完成时执行的函数

示例

600毫秒缓慢的将段落滑上

jQuery 代码:

$("p").slideUp("slow");

200毫秒快速将段落滑上,之后弹出一个对话框

jQuery 代码:

$("p").slideUp("fast",function(){
   alert("Animation Done.");
 });

 

 

 

slideToggle(speed,[callback])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以滑动的方式隐藏或显示。

返回值:jQuery

参数

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

callback (Function) : (可选) 在动画完成时执行的函数

示例

600毫秒缓慢的将段落滑上或滑下

jQuery 代码:

$("p").slideToggle("slow");

200毫秒快速将段落滑上或滑下,之后弹出一个对话框

jQuery 代码:

$("p").slideToggle("fast",function(){
   alert("Animation Done.");
 });

jQuery中淡入淡出效果

fadeIn(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值:jQuery

参数

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

callback (Function) : (Optional) (可选) 在动画完成时执行的函数

示例

600毫秒缓慢的将段落淡入

jQuery 代码:

$("p").fadeIn("slow");

200毫秒快速将段落淡入,之后弹出一个对话框

jQuery 代码:

$("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

fadeOut(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值:jQuery

参数

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

callback (Function) :(可选) 在动画完成时执行的函数

示例

600毫秒缓慢的将段落淡出

jQuery 代码:

$("p").fadeOut("slow");

200毫秒快速将段落淡出,之后弹出一个对话框

jQuery 代码:

$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });

fadeTo(speed,opacity,[callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值:jQuery

参数

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

opacity (Number) : 要调整到的不透明度值(01之间的数字).

callback (Function) : (可选) 在动画完成时执行的函数

示例

600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度

jQuery 代码:

$("p").fadeTo("slow", 0.66);

200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框

jQuery 代码:

$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

 

 

 

 

 

jQuery中的自定义动画

animate(params[,duration[,easing[,callback]]])

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

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

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

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

返回值

jQuery

参数

params (Options) : 必须的,jion对象一组包含作为动画属性和终值的样式属性和及其值的集合

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

callback (Function) : (可选) 在动画完成时执行的函数

示例1

点击按钮后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 代码:

<p style="display: block;left:20px;top:20px;position:absolute;width:200px;height:200px;background-color:Red;border-style:solid;border-width:1px;border-color:Black;">Hello</p>

jQuery 代码:

向右移动

$("#right").click(function(){
  $(“p").animate({left: '+50px'}, "slow"); 

//要移动的元素是 绝对定位position:absolute; left增大相当于右移
});
$("#left").click(function(){
  $(“p").animate({left: '-50px'}, "slow");
});

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

jQuery 代码:

$("p").animate({
   height: 'toggle', opacity: 'toggle' //
不断切换opacity透明度 height
 }, "slow");

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

jQuery 代码:

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

animate(params,options)用于创建自定义动画的函数。

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

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

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

返回值:jQuery

参数

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

options (Options) : 一组包含动画选项的值的集合。

选项

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

complete (Function) : 在动画完成时执行的函数

step (Callback) :

queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

示例

第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。

第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.

HTML 代码:

<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>

jQuery 代码:

$("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
     .animate( { fontSize: '10em' } , 1000 ) // queue: false
说明绿的这俩动画同时进行

     .animate( { borderWidth: 5 }, 1000);   //等前两个执行完毕再执行
});

$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

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

jQuery 代码:

$("p").animate({
   left: 50, opacity: 'show'   // opacity: 'show'
由隐藏变为显示状态
 }, { duration: 500 }); // duration: 500
500毫秒内

stop()

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画,他们将被马上执行

返回值

jQuery

示例

点击Go之后开始动画,Stop之后会在当前位置停下来

HTML 代码:

<button id="go">Go</button> <button
id="stop">STOP!</button>
<div class="block"></div>
<button id="go">Go</button> <button
id="stop">STOP!</button>
<div class="block"></div>

jQuery 代码:

// 开始动画
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

//
当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});

^