您现在的位置是: 网站首页> 前端技术> jQuery jQuery
jQuery 实现动画效果
Smile 2020-09-25 16:23:00 HTML jQuery 阅读:1968
简介利用jQuery很容易实现web前端页面的各种动画效果,例如隐藏、显示、切换,滑动,淡入淡出,以及动画,在轮播图、手风琴等页面动画经常用到
1、隐藏和显示 HTML 元素
- hide() - 隐藏元素
- show() - 显示元素
- toggle() - 切换hide()和show()方法
语法
- $(selector).hide(speed,callback);
- $(selector).show(speed,callback);
- $(selector).toggle(speed,callback);
- 可选,speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
- 可选,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 元素
- fadeIn() - 用于淡入已隐藏的元素
- fadeOut() - 用于淡出可见元素
- fadeToggle() - 用于fadeIn()与fadeOut()方法之间进行切换
- fadeTo() - 渐变为给定的不透明度(值介于 0 与 1 之间)
语法
- $(selector).fadeIn(speed,callback);
- $(selector).fadeOut(speed,callback);
- $(selector).fadeToggle(speed,callback);
- 可选,speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
- 可选,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);
- 必需,speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
- 必需,opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)
- 可选,callback 参数是该函数完成后所执行的函数名称
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
3、滑动 HTML 元素
- slideDown() - 用于向下滑动元素
- slideUp() - 用于向上滑动元素
- slideToggle() - 用于slideDown()与slideUp()方法之间进行切换
语法:
- $(selector).slideDown(speed,callback);
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
- 可选的 callback 参数是滑动完成后所执行的函数名称
(1)向下滑动
$("#div").slideDown("slow",function(){
alert("slideDown() 方法已执行");
});
(2)向上滑动
$("#div").slideUp("slow",function(){
alert("slideUp() 方法已执行");
});
(3)向下/向上滑动
$("#div").slideToggle("slow",function(){
alert("slideToggle() 方法已执行");
});
4、动画
- animate() 方法用于创建自定义动画
- stop() 方法用于在动画或效果完成前对它们进行停止
(1)开始动画
语法:
- $(selector).animate({params},speed,callback);
- 必需,params 参数定义形成动画的 CSS 属性
- 可选,speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒
- 可选,callback 参数是动画完成后所执行的函数名称
$('div').animate({height:'300px',opacity:'0.4'},"slow");
$('div').animate({width:'300px',opacity:'0.8'},"slow");
(2)停止动画
语法:
- $(selector).stop(stopAll,goToEnd);
- 可选,stopAll参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行
- 可选,goToEnd参数规定是否立即完成当前动画。默认是 false
$("div").stop();
很赞哦! (0)