jQuery 实现动画效果

1、隐藏和显示 HTML 元素

1. hide() - 隐藏元素
2. show() - 显示元素
3. toggle() - 切换hide()和show()方法

语法

• $(selector).hide(speed,callback);
• $(selector).show(speed,callback);
• $(selector).toggle(speed,callback);

1. 可选，speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
2. 可选，callback 参数是隐藏或显示完成后所执行的函数名称

（1）隐藏

$("div").hide(1000,"linear",function(){
	alert("hide() 方法已执行");
});

（2）显示

$("div").show(1000,"linear",function(){
	alert("show() 方法已执行");
});

（3）隐藏/显示

$("div").toggle(1000,"linear",function(){
	alert("toggle() 方法已执行");
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）

2、淡入淡出 HTML 元素

1. fadeIn() - 用于淡入已隐藏的元素
2. fadeOut() - 用于淡出可见元素
3. fadeToggle() - 用于fadeIn()与fadeOut()方法之间进行切换
4. fadeTo() - 渐变为给定的不透明度（值介于 0 与 1 之间）

语法

• $(selector).fadeIn(speed,callback);
• $(selector).fadeOut(speed,callback);
• $(selector).fadeToggle(speed,callback);

1. 可选，speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
2. 可选，callback 参数是 fading 完成后所执行的函数名称

（1）淡入

$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);

（2）淡出

$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);

（3）淡入/淡出进行切换

$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);

（4）渐变为给定的不透明度（值介于 0 与 1 之间）

语法:

• $(selector).fadeTo(speed,opacity,callback);

1. 必需，speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
2. 必需，opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
3. 可选，callback 参数是该函数完成后所执行的函数名称

$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);

3、滑动 HTML 元素

1. slideDown() - 用于向下滑动元素
2. slideUp() - 用于向上滑动元素
3. slideToggle() - 用于slideDown()与slideUp()方法之间进行切换

语法:

• $(selector).slideDown(speed,callback);

1. 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
2. 可选的 callback 参数是滑动完成后所执行的函数名称

（1）向下滑动

$("#div").slideDown("slow",function(){
	alert("slideDown() 方法已执行");
});

（2）向上滑动

$("#div").slideUp("slow",function(){
	alert("slideUp() 方法已执行");
});

（3）向下/向上滑动

$("#div").slideToggle("slow",function(){
	alert("slideToggle() 方法已执行");
});

4、动画

1. animate() 方法用于创建自定义动画
2. stop() 方法用于在动画或效果完成前对它们进行停止

（1）开始动画

语法：

• $(selector).animate({params},speed,callback);

1. 必需，params 参数定义形成动画的 CSS 属性
2. 可选，speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
3. 可选，callback 参数是动画完成后所执行的函数名称

$('div').animate({height:'300px',opacity:'0.4'},"slow");
$('div').animate({width:'300px',opacity:'0.8'},"slow");

（2）停止动画

语法:

• $(selector).stop(stopAll,goToEnd);

1. 可选，stopAll参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行
2. 可选，goToEnd参数规定是否立即完成当前动画。默认是 false

$("div").stop();

转载：感谢您对油纸伞个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源油纸伞博客”。

很赞哦！ (0)