您现在的位置是: 网站首页> 前端技术> jQuery jQuery

jQuery 实现动画效果

Smile 2020-09-25 HTML jQuery 阅读:139

简介利用jQuery很容易实现web前端页面的各种动画效果,例如隐藏、显示、切换,滑动,淡入淡出,以及动画,在轮播图、手风琴等页面动画经常用到

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)

文章评论

站点信息