首页 > 网站 > WEB开发 > 正文

jquery学习(五)动画

2024-04-27 15:03:52
字体:
来源:转载
供稿:网友

1.基本动画

(1)show 语法:

$(selector).show(speed,callback)显示元素

参数:

speed:可选参数,表示速度,可能的值包括:毫秒,"slow","normal","fast"。callback:可选参数,show 函数执行完之后,要执行的函数。

(2)hide

隐藏元素,用法和show一样

(3)toggle 语法:

$(selector).toggle(speed,callback,switch)

参数:

前两个参数和show一样switch:可选,布尔值。规定toggle是否隐藏或显示所有被选元素,True - 显示所有元素,False - 隐藏所有元素,如果设置此参数,则无法使用 speed 和 callback 参数。

2.预制动画

(1)滑动

slideDown:用于向下滑动元素slideUp:用于向上滑动元素。slideToggle:可以在 slideDown() 与 slideUp() 方法之间进行切换

例如:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery/jquery-3.1.1.js"></script></head><body><script> $(document).ready(function () { $(".flip").on("click", function () { $(".panel").slideToggle(); }); });</script><style type="text/CSS"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; width: 300px; } div.panel { height:120px; }</style><div class="panel"> <p>hello world</p></div><p class="flip">点击这里</p></body></html>

(2)淡入淡出

fadeIn:淡入已隐藏的元素fadeOut:淡出可见元素fadeToggle:可以在 fadeIn() 与 fadeOut() 方法之间进行切换fadeTo:方法允许渐变为给定的不透明度

注意:$(selector).fadeTo(speed,opacity,callback),fadeTo语法不太一样,opecity代表指定的不透明度。

3.自定义动画

(1)animate 语法一:

$(selector).animate(styles,speed,easing,callback)styles:规定产生动画效果的 CSS 样式和值。easing:可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数:swing,linear。扩展插件中提供更多 easing 函数。

语法二:

$(selector).animate(styles,options)options:可选。规定动画的额外选项。可能的值:speed - 设置动画的速度easing - 规定要使用的 easing 函数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

(2)stop

$(selector).stop(stopAll,goToEnd)停止当前正在运行的动画。stopAll:可选。规定是否停止被选元素的所有加入队列的动画。goToEnd:可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

有些用法我也不是很明白,就等项目中用到再具体研究吧


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表