jQuery中的动画效果
动态效果
- 显示与隐藏
- 单位:毫秒
- $("ul").show( 数字 | slow | normal | fast );
- $("ul").hide( 数字 | slow | normal | fast );
- $("ul").toggle( 数字 | slow | normal | fast );
- slow:600ms
- normal:400ms
- fast:200ms
$("ul").show(500); //显示
$("ul").hide(slow); //隐藏
$("ul").toggle(normal); //显示 / 隐藏
复制代码
案例:几张图片依次的显示与隐藏
$(function () {
$("#btn1").click(function () {
//获取div,最后一个图片,隐藏
$("div>img").last("img").hide(800,function () {
//arguments.callee相当于递归
$(this).prev().hide(800,arguments.callee);
});
});
//显示
$("#btn2").click(function () {
$("div>img").first("img").show(800,function () {
//arguments.callee相当于递归
$(this).next().show(800,arguments.callee);
});
});
});
复制代码
滑动效果(向上、向下)
- 滑入: slideUp( 数字 | slow | normal | fast )
- 滑出:slideDown( 数字 | slow | normal | fast )
- 切换划入滑出:slideToggle( 数字 | slow | normal | fast )
- slow:600ms
- normal:400ms
- fast:200ms
( “div" ).slideDown(1000); $( “div" ).slideToggle(1000);
淡入与淡出效果
- 淡入: fadeIn( 数字 | slow | normal | fast )
- 淡出:fadeOut( 时间 )
- 淡入/淡出:fadeTaggle( 时间 )
- 淡化透明度:fadeTo( 时间,透明度)
("#dv").fadeOut(1000); ("#dv").fadeTo(1000,0.3);
其他方式
停止动画
- .stop()方法用来停止当前动画
- 一般会与show()和hide()方法配合使用
("ul")stop().hide(slow); //隐藏
jQuery中animate方法的使用
- animate(对象,时间,函数)
- 第一个参数:是键值对---对象(数值的属性可以改,颜色不能改)
- 第二个参数:时间---1000毫秒
- 第三个参数:匿名函数---回调函数
$(function () {
$("#btn").click(function () {
$("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
$("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
});
});
复制代码