学习笔记③ (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 调用。