jQuery动画与特效详解
jQuery的自动显隐,渐入渐出、飞入飞出、自定义动画
拓展:opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
1.显示和隐藏hide()和show()
这两个方法可以接受参数控制显隐藏过程
语法如下
show(duration,[callback]);
hide(duration,[callback]);
其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行。
$("input:last").click(function() {
$("p").show(500); //显示
});
2.使用fadeIn()和fadeOut()方式
动画效果类似褪色,语法与slow()和hide()完全相同
语法:
fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐渐fadeIn
});
3.fadeTo()方法的使用,将被选元素的不透明度逐渐地改变为指定的值
语法:$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
4.slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果, 这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。
之前看到网上有人说这个滑动效果是通过控制display样式来实现,一开始我也有此疑问,所以在代码中我添加了一段输出div高度的脚本,以此来验证滑动效果的确是否通过高度来控制的,结果证明通的确如此。
①jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
②jQuery slideUp() 方法用于向上滑动元素。
③jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
5.jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够自定义动画
一共有两种形式。第一种形式比较常用。用法如下
①animate(params,[duration],[easing],[callback])
注意:params(参数)中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外,params只能是css中用数值表示的属性。例如width.top.opacity等。
所以像backgroundColor这样的属性不被animate支持,这里我遇到的一个问题就是溢出隐藏overflow-y,这里有"-",所以不能加"-"。且属性的值不是数字,所以不能用这些属性。
在params中,jQuery还可以用“+=”或者"-="来表示相对变化。如先将div进行绝对定位,然后使用animate()中的-=和+=分别实现相对左移和相对右移。