jquery 动画函数animate/show/slideDown/fadeIn/toggle

动画函数

jQuery提供的一组常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

 

1.  隐藏显示动画

show()方法

形式一：

// 不带参数，没有动画
$(selector).show();//作用等同于css(“display”, ”block”)

形式二：

//参数为数值，表示：执行动画时长
$(selector).show(2000);//单位为毫秒（ms），2000毫秒即2秒

形式三：

//参数为字符串，是jQuery预设的值，共有三个，分别是：slow、normal、fast
$(selector).show(“slow”); //slow：600ms、normal：400ms、fast：200ms

形式四：

// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后执行的回调函数
$(selector).show(2000, function() {});

hide()方法

$(selector).hide();
$(selector).hide(1000);
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});

显示隐藏切换

$(selector).toggle(speed,callback);

jQuery预设的三组动画效果的语法几乎一致：

参数可以有两个，第一个是动画的执行时长(可以是指定字符或毫秒)，第二个是动画执行完成后的回调函数。

 

2.  滑入滑出动画

滑入效果

作用：让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);

滑出动画

作用：让元素以上拉动画效果隐藏起来

$(selector).slideUp(speed,callback);

滑入滑出切换

$(selector).slideToggle(speed,callback);

 

3.  淡入淡出动画

淡入效果

作用：让元素以淡淡的进入视线的方式展示出来

$(selector).fadeIn(speed, callback);

淡出效果

作用：让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(1000);

淡入淡出切换

作用：通过改变不透明度，切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast',function(){});

淡淡达到效果

改变不透明度到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

作用：调节匹配元素的不透明度

// 用法有别于其他动画效果
 
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); //0全透，1全不透
 
// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);

4.  动画方法总结

 

有规律的体现：

jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。{height:400px; width:300px; opacity:0.4;}

这三个CSS属性的共性是：属性值只有一个（合写的不行），并且这个值是数值（至少经过准换后能变为数值）。

 

5.  自定义动画

注意：所有能够执行动画的属性必须只有一个数字类型的值。

比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font

 

动画支持的属性：

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

 

作用：执行一组CSS属性的自定义动画

// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,callback);

6.  停止动画

作用：停止当前正在执行的动画

为什么要停止动画？

如果多个动画在同一元素上执行，对这个元素来说，后面的动画将被放到队列中，从而形成动画队列。（联想：排队进站）

上一个动画执行完成，下一个动画才能执行，但是这样的效果有时不是我们想要的。

// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画
$(selector).stop(clearQueue,jumpToEnd);

解释：

当调用stop()方法后，当前动画停止于当前样式的只（不会到达目标值），队列中的下一个动画会立即开始。

如果参数clearQueue被设置为true，那么队列中剩余的动画就被删除了，永远不会再执行。

如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，回调函数也会立即执行。

 

另外：

如果元素动画还没有执行完，此时调用stop()方法，那么当前动画将会停止。并且由于本次动画没有执行完成，本次动画的回调函数也不会被执行（下一次的会照常执行）。

 

常用方式：

$(selector).stop();//当前动画停止于此刻的样式状态 后面的动画继续执行