jQuery动画
1.hide([speed,[easing],[fn]])
方法:隐藏显示的元素
参数：
①speed[,fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
②[speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
2.show([speed,[easing],[fn]])
方法：显示隐藏的匹配元素。
参数：
①speed[,fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
②[speed],[easing],[fn]
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
注意：参数可以是一个number类型,也可以是字符串类型
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 400px; } img{ width:90px ; height:90px; vertical-align: top; } </style> <script src="jquery-1.12.2.js"></script> <script> // $(function () { // $("#btn1").click(function () { // //回调函数 // $("div>img").hide(1000,function () { // alert("结束了"); // }); // }); // // $("#btn2").click(function () { // //回调函数 // $("div>img").show(1000,function () { // alert("结束了===="); // }); // }); // }); </script> <script> $(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); }); }); }); </script> </head> <body> <input type="button" value="隐藏动画" id="btn1"/> <input type="button" value="显示动画" id="btn2"/> <div> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> </div> </body> </html>
动画方法:animate方法
第一个参数:键值对,(数值的属性可以改,颜色不能改)
第二个参数:动画的时间
第三个参数:回调函数
例如：
$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {
$("#im").animate({"left":"+=505px","top":"-=400px","width":"+=200px","height":"+=200px"},1000);
});
停止动画效果:stop()方法
例如：
$(".wrap>ul>li").mouseover(function () {
$(this).children("ul").stop().show(500);// 显示 ul
});
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").stop().hide(500);// 显示 ul
});
其他动画方法
1.$("div").slideUp(1000);// 滑入
2.$("div").slideDown(1000);// 滑出
3.$("div").slideToggle(1000);// 切换滑入滑出
4.$("div").fadeIn(1000);// 淡入
5.$("div").fadeOut(1000);// 淡出
6.$("div").fadeToggle(1000);// 切换淡入淡出
7.
// 可以设置透明度,参数 1: 时间 , 参数 2: 到达透明度
$( “div ”).fadeTo(1000,0.3);// 一个参数,常用
// 参数 1: 没有时间 , 参数 2: 到达透明度
// 和 css("opacity",0.1);
$("div").fadeTo(0,0.1);// 一个参数
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢