学习笔记③ (jQuery 动画效果)

jQuery 动画效果

1.显示隐藏效果

1.1显示

(1) 显示语法规范

show( [ speed,[easing],[fn] ] )

(2) 显示参数

参数都可以省略，无动画直接显示speed（速度） : ①“show” | “normal” | “fast” ; ②表示动画时长的毫秒数值（如：100）easing （切换效果）：“swing”(默认:慢快慢) | “linear”（匀速）fn （回调函数）：在动画完成时执行的函数。每个元素执行一次

1.2 隐藏

(1) 显示语法规范

hide( [ speed,[easing],[fn] ] )

(2) 显示参数

参数都可以省略，无动画直接显示speed（速度） : ①“show” | “normal” | “fast” ; ②表示动画时长的毫秒数值（如：100）easing （切换效果）：“swing”(默认:慢快慢) | “linear”（匀速）fn （回调函数）：在动画完成时执行的函数。每个元素执行一次

1.3 切换

(1) 语法规范

toggle( [ speed,[easing],[fn] ] )

(2) 显示参数（同上）

2. 滑动

上拉滑动 slideUp()下拉滑动 slideDown()切换滑动 slideToggle()

Ps: 事件切换 hover( [over],out) (1) over :鼠标移到元素上要触发的函数（相当于mouseenter） (2) out : 鼠标移出元素要触发的函数（相当于mouseleave） hover(function(){} , function(){}) (3) 如果只写一个函数，则鼠标经过和鼠标离开都会触发这个函数(如：使用slideToggle(）)

3.动画队列及其停止排队方法

（1）动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者队列执行 （2）停止排队stop()停止前面的动画，只执行最后一次stop()方法必须写在动画的前面

4.淡入淡出

淡入效果 fadeIn()淡出效果 fadeOut()淡入淡出切换 fadeToggle()修改透明度 fadeTo([speed] , opacity , [easing] , [fn])

opacity: 透明度（0-1），必须写 speed:必须写

5.自定义动画 animate

(1) 语法

$(selector).animate({params},speed,callback); ① params : 想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果复合属性则需要采取驼峰命名法 ②speed： 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。 ③callback： 参数是动画完成后所执行的函数名称 ④色彩动画并不包含在核心 jQuery 库中，需要下载相应的插件

(2)用法

jQuery animate() - 操作（一）多个属性jQuery animate() - 使用相对值

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute

$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); jQuery animate() - 使用预定义的值

把属性的动画值设置为 “show”、“hide” 或 “toggle”：

$("button").click(function(){ $("div").animate({ height:'toggle' }); }); jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。 这意味着如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。