jquery自带的已定义动画函数

我们的网页如果一直是那种静态不动的，就显得有点太安静了。所以，我们一般会在页面上添加一些动画动态效果，让页面更加的丰富，如：选项卡、幻灯片、轮播图等等，这些动画我们都可以通过jquery代码来实现的。其实，jquery也自带了一些简单的动画函数供我们使用。

一、jquery的【显示、隐藏、切换】的动画函数

1、方法 show()显示、hide()隐藏、toggle()显示隐藏切换

这3个动画方法有2个参数：速度 与 回调函数

2、速度参数：

速度参数可以是：数值、slow(600ms)、normal(400ms)默认、fast(200ms)。

如：

$("div").show(200);
或
$("div").show('fast');
表示div元素在200后显示

3、回调函数：

实名回调函数，函数名调用自身

$('.show').click(function () {
$('div').first().show('fast', function showSpan() {
$(this).next().show('fast', showSpan);
});
});

匿名函数自调用.使用 arguments.callee 匿名函数自调用

$('.hide').click(function () {
$('div').last().hide('fast', function() {
$(this).prev().hide('fast', arguments.callee);
});
});

二、jquery【向下滑动、向上卷动、切换】动画函数

向下滑动：slideDown()、
向上卷动：slideUp()、
切换向下滑动与向上卷动：slideToggle()

这3个方法的参数跟show()是一样的。使用方法也是一样的。

三、jquery【淡入、淡出、切换】动画函数

淡入：fadeIn() 【从透明到不透明】
淡出：fadeOut()【从不透明到透明】
切换淡入与淡出：fadeToggle()

还有一个比较特加的淡入淡出函数：fadeTo()

fadeTo()方法：可以实现一个元素淡入淡出渐变到一个指定的透明度的值。它可以有3个参数：

fadeTo(速度, 指定的不透明值, 回调函数);

实例1：

$("p").fadeTo("slow", 0.66);
用600毫秒缓慢的将p段落的透明度调整到0.66，大约2/3的可见度。

实例2：带回调函数

$("p").fadeTo("fast", 0.25, function(){
alert("200毫秒透明度渐变到0.25，我1/4透明度，然后调用回调函数");
});