jQuery 库的动画用法

动画

在 jQuery 中的动画一共有两种

• 预定义动画
• 自定义动画

预定义动画

显示与隐藏

show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。

在 jQuery 中还准备了显示与隐藏的动画切换效果

语法结构如下：

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);

参数：

• speed：三种预定速度之一的字符串（“slow”、“normal” 或者 “fast”）或表示动画时长的毫秒数值。（动画执行时长）
• easing：用来指定切换效果，默认是 “swing”，可用参数 “linear”
• fn：在动画完成时执行的函数，每个元素执行一次

在默认情况下直接使用 show() 方法和 hide() 方法不带有动画效果。

有动画版本：同时改变宽度和高度

• show(speed,callback)
  • speed：动画执行的时长
  • callback：动画执行完毕后的回调函数
• hide(speed,callback)
  • speed：动画执行的时长
  • callback：动画执行完毕后的回调函数

用法示例：

$('#box').hide(3000);
$('#box').show(3000);

滑动式动画

jQuery 中提供了 slideUp() 方法和 slideDown() 方法通过改变高度值实现动画效果。

语法结构如下：

$element.slideUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

参数：

• speed：三种预定速度之一的字符串（“slow”、“normal” 或者 “fast”）或表示动画时长的毫秒数值。（动画执行时长）
• easing：用来指定切换效果，默认是 “swing”，可用参数 “linear”
• fn：在动画完成时执行的函数，每个元素执行一次

滑动时动画没有无动画版本，滑动的时长是底层代码预定义动画执行的时长，依靠改变指定元素的高度进行变化。

用法示例：

$('#box').slideUp(3000)
$('#box').slideDown(3000);

淡入淡出

jQuery 中提供了 fadeIn() 方法和 fadeOut() 方法通过改变透明度实现动画效果。

语法结构如下：

$element.fadeIn([speed],[easing],[fn]);
$element.fadeOut([speed],[easing],[fn]);

参数：

• speed：三种预定速度之一的字符串（“slow”、“normal” 或者 “fast”）或表示动画时长的毫秒数值。（动画执行时长）
• easing：用来指定切换效果，默认是 “swing”，可用参数 “linear”
• fn：在动画完成时执行的函数，每个元素执行一次

用法示例：

$('#box').fadeIn(3000)
$('#box').fadeOut(3000);

动画切换效果

jQuery 中还提供了三组动画切换效果：

• toggle([speed][,easing][,fn]) 方法：如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。
• slideToggle([speed][,easing][,fn]) 方法：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
• fadeToggle([speed][,easing][,fn] 方法：通过不透明度的变化来开关所有匹配元素的淡人和淡出效果，并在动画完成后可选地触发一个回调函数。

用法示例：

$('#btn').click(function(){
    // 显示与隐藏
    $('#box').toggle(3000);
    // 滑动式
    $('#box').slideToggle(3000);
    // 淡入淡出
    $('#box').fadeToggle(3000);
})

自定义动画

animate() 方法

jQuery 提供了 animate() 方法完成自定义动画效果，该方法具有两种用法：

// 第一种
$element.animate(properties,duration,easing,complete)
// 第二种
$element.animate(properties,options)

• properties：一个 CSS 属性和值的对象，动画根据这组对象移动
• duration：一个字符串或者数字决定动画将运行多久
• easing：一个字符串，表示过渡使用哪种缓冲函数
• complete：在动画完成时执行的回调函数
• options：一组包含动画选项的值的集合
  • speed：表示动画执行的时长,单位为毫秒
  • callback：表示动画执行完毕后的回调函数
  • queue：布尔值,设置是否添加到动画队列中

// 动画
$('#box').animate({
    width:0,
    height:0
},3000);
// 移动 - 格式1
$('#boxx').animate({
    left:200
}, 3000);
// 格式2
$('#boxx').animate({
    left: 200
}, {
    speed:3000
});

并发与排队效果

1. 并发效果：即多个动画效果同时执行，多个 CSS 的样式属性值同时改变，动画多个综合效果

$("#panel").click(function(){
    $(this).animate({
        left:"500px",
        height:"200px"
    },3000);
});

2. 排队效果：即多个动画按照先后顺序执行，就是指多个动画按照定义的先后顺序执行，多个 CSS 的样式属性值先后改变

$("#panel").click(function(){
    $(this).animate({
        left:"500px"
    },3000)
    .animate({
        height:"200px"
    },3000)
})

jQuery 中的 animate() 方法不支持以下 CSS 样式属性：

backgroundColor	borderBottomColor	borderLeftColor
borderRightColor	borderTopColor	Color
outlineColor

停止动画效果

jQuery 提供了 stop() 方法用于停止所有在指定元素上正在运行的动画，在没有接收任何参数时，立即停止执行动画

语法如下：

$element.animate([clearQueue][,gotoEnd]);

• clearQueue：如果设置成 true，则清空队列。可用立即结束动画
  • false 表示停止当前动画,但队列中的动画继续执行
  • true 表示停止当前动画,并且清空动画队列
• gotoEnd：让当前正在执行的动画立即完成，并且重设 show 和 hide 调用回调函数等
  • false 不会做任何处理
  • true 表示停止当前动画,并且将指定元素设置为动画执行完毕后的样式

用法示例：

$('#start').click(function(){
    $('#box').animate({
        left:800
    },3000).animate({
        top:600
    },3000);
});
$('#stop').click(function(){
    $('#box').stop(false,true);
})

延迟执行动画

jQuery 提供了 delay() 方法用于设置一个延迟来推迟执行队列之后的的项目

语法如下：

$element.delay(duration[,queueName]);

• duration：延迟时间，单位为毫秒
• queueName：队列名称，默认是 Fx，动画队列

用法示例：

// 在 .slideUp() 和 fadeIn() 之间延时 800 毫秒 
$('#box').slideUp(300).delay(800).fadeIn(400);

$('#box').animate({
    left:800
},3000).delay(1000).animate({
    top:600
},3000);