我们的网页如果一直是那种静态不动的,就显得有点太安静了。所以,我们一般会在页面上添加一些动画动态效果,让页面更加的丰富,如:选项卡、幻灯片、轮播图等等,这些动画我们都可以通过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透明度,然后调用回调函数");
});