JQuery-动画效果
动画效果
speed :三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing :(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn :在动画完成时执行的函数，每个元素执行一次。
基本
show([s,[e],[fn]])
- 作用：显示隐藏的匹配元素。
$("div").show(1000, function () {
alert("显示完成");
});
hide([s,[e],[fn]])
- 作用：隐藏显示的元素
$("div").hide(1000, function () {
alert("隐藏完成");
});
toggle([s],[e],[fn])
- 作用：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("div").toggle(1000, function () {
alert("切换完成");
});
滑动
slideDown([s],[e],[fn])
- 作用：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
//用1000毫秒缓慢以滑动方式显示隐藏的 <div> 元素：
$("div").slideDown(1000, function () {
alert("展开成功");
});
slideUp([s,[e],[fn]])
- 作用：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
//用1000毫秒缓慢以滑动方式隐藏显示的 <div> 元素：
$("div").slideUp(1000, function () {
alert("收起成功");
});
slideToggle([s],[e],[fn])
- 作用：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
//用1000毫秒缓慢的将div滑上或滑下
$("div").slideToggle(1000, function () {
alert("切换成功");
});
淡入淡出
fadeIn([s],[e],[fn])
- 作用：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
- 注意：这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
//用1000毫秒快速将div淡入，之后弹出一个对话框
$("div").fadeIn(1000, function () {
alert("淡入成功");
});
fadeOut([s],[e],[fn])
- 作用：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
- 注意：这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
//用1000毫秒快速将div淡出，之后弹出一个对话框
$("div").fadeOut(1000, function () {
alert("淡出成功");
});
fadeToggle([s,[e],[fn]])
- 作用：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
- 注意：这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
//用1000毫秒快速将div淡出/淡入，之后弹出一个对话框 $("div").fadeToggle(1000, function () { alert("切换成功"); });
fadeTo([[s],o,[e],[fn]])
> opacity:一个0至1之间表示透明度的数字。
- 作用：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
- 注意：这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
//用1000毫秒快速将段落的透明度调整到0.5，大约1/2的可见度，之后弹出一个对话框 $("div").fadeTo(1000, 0.5, function () { alert("淡入到成功"); });
自定义
stop([c],[j])
clearQueue :如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd :如果设置成true，则完成队列。可以立即完成动画。
-
作用：停止所有在指定元素上正在运行的动画。
-
注意：如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
//立即完成当前的, 并且停止后续所有的
$(".box1").stop(true, true);
//立即停止当前和后续所有的动画
$("div").stop(true);
$(".box1").stop(true, false);
//立即完成当前的, 继续执行后续动画
$(".box1").stop(false, true);
// 立即停止当前动画, 继续执行后续的动画
$("div").stop();
$("div").stop(false);
$(".box1").stop(false, false);
animate(p,[s],[e],[fn])
params :一组包含作为动画属性和终值的样式属性和及其值的集合
-
作用：用于创建自定义动画的函数。
-
注意：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
$(".box1").animate( {
width: "400px",//又初始的width变到400px
}, 1000, "linear",
function () {alert("操作完毕"); }
);
delay(d,[q])
duration :延时时间，单位：毫秒
queueName :队列名词，默认是Fx，动画队列。
- 作用：设置一个延时来推迟执行队列中之后的项目。
$(".box1")
.animate({ width: "500px" }, 1000)
// 延时两秒执行后面动画
.delay(2000)
.animate({ height: "500px" }, 1000)