jQuery学习小结2——动画

浏览数：12 / 时间：2015年06月09日

一、基础动画

方法名	说明
show([speed,[easing],[fn]]) hide([speed,[easing],[fn]])	speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(分别对应600 毫秒、400 毫秒和200 毫秒) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次
toggle([speed],[easing],[fn])	用来替代hide()方法和show()方法，响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideUp([speed],[easing],[fn]) slideDown([speed],[easing],[fn])	这个动画效果只调整元素的高度，其他参数同show
slideToggle()	用来代替slideUp()和slideDown()方法，所以只能改变高度
fadeIn([speed],[easing],[fn]) fadeOut([speed],[easing],[fn]) fadeToggle([speed,[easing],[fn]])	这个动画只调整元素的不透明度，其他参数同show 三个透明度方法只能是从0 到100，或者从100 到0
fadeTo([[speed],opacity,[easing],[fn]])	只改变不透明度 opacity:一个0至1之间表示透明度的数字。

1、显示、隐藏

.hide()方法其实就是在行内设置CSS 代码：display:none; 而.show()方法要根据原来元素是区块还是内联来决定，如果是区块，则设置CSS 代码：display:block; 如果是内联，则设置CSS 代码：display:inline;

$(‘.show‘).click(function () {
    $(‘#box‘).show(‘slow‘, function () {
        alert(‘动画持续完毕后，执行我！‘);
    });
});
//列队动画，使用函数名调用自身
$(‘.show‘).click(function () {
    $(‘div‘).first().show(‘fast‘, function showSpan() {
        $(this).next().show(‘fast‘, showSpan);
    });
});
//列队动画，使用arguments.callee 匿名函数自调用
$(‘.hide‘).click(function () {
    $(‘div‘).last().hide(‘fast‘, function() {
        $(this).prev().hide(‘fast‘, arguments.callee);
    });
});

1.2 滑动、卷动

滑动、卷动效果和显示、隐藏效果一样，具有相同的参数。

1.3 淡入、淡出

淡入、淡出效果和显示、隐藏效果一样，具有相同的参数
对于.fadeTo()方法，如果本身透明度大于指定值，会淡出，否则相反

$(‘.toggle‘).click(function () {
    $(‘#box‘).fadeTo(‘slow‘, 0.33); //0.33 表示值为33
});

二、自定义动画

　　animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。

2.1 操作多个属性——params

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });
});

默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，需要从 jQuery.com 下载 Color Animations 插件

2.2 使用相对值——在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    height:‘+=150px‘,
    width:‘+=150px‘
  });
});

自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画，这个时候就可以使用相对值

2.3 使用预定义的值——"show"、"hide" 或 "toggle"

$("button").click(function(){
  $("div").animate({
    height:‘toggle‘
  });
});

2.4 使用队列功能

自定义实现列队动画的方式，有两种：

在回调函数中再执行一个动画——同一个元素，或不同元素
通过连缀或顺序来实现列队动画——同一个元素

//1. 通过依次顺序实现列队动画 —— 注意：如果不是同一个元素，就会实现同步动画
$(‘.animate‘).click(function () {
　　$(‘#box‘).animate({‘left‘ : ‘100px‘});
　　$(‘#box‘).animate({‘top‘ : ‘100px‘});
　　$(‘#box‘).animate({‘width‘ : ‘300px‘});
});
//2. 通过连缀实现列队动画
$(‘.animate‘).click(function () {
　　$(‘#box‘).animate({
　　　　‘left‘ : ‘100px‘
　　}).animate({
　　　　‘top‘ : ‘100px‘
　　}).animate({
　　　　‘width‘ : ‘300px‘
　　});
});
//3. 通过回调函数实现列队动画
$(‘.animate‘).click(function () {
　　$(‘#box‘).animate({
　　　　‘left‘ : ‘100px‘
　　}, function () {
　　　　$(‘#box‘).animate({
　　　　　　‘top‘ : ‘100px‘
　　　　}, function () {
　　　　　　　　$(‘#box‘).animate({
　　　　　　　　　　‘width‘ : ‘300px‘
　　　　　　　　});
　　　　});
　　});
});

2.4 其他函数

① stop([queue],[clearQueue],[jumpToEnd])

queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画

$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:‘100px‘},5000);
    $("div").animate({fontSize:‘3em‘},5000);
  });  
  $("#stop").click(function(){
    $("div").stop();   //按钮会停止当前活动的动画，但允许已排队的动画向前执行
  });
  $("#stop2").click(function(){
    $("div").stop(true);   //按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止
  });
  $("#stop3").click(function(){
    $("div").stop(true,true);   //会立即完成当前活动的动画，然后停下来
  });  
});

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

② delay(duration,[queueName])

$(‘#foo‘).slideUp(300).delay(800).fadeIn(400);

③ queue(element,[queueName],callback()) —— 显示或操作在匹配元素上执行的函数队列

element:检查附加列队的DOM元素
queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
callback():要添加进队列的函数

④ dequeue([queueName])——从队列最前端移除一个队列函数，并执行他，队列名，默认为fx

⑤ clearQueue([queueName])——清空对象上尚未执行的所有队列，队列名，默认为fx

如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列

//使用.queue()方法模拟动画方法跟随动画方法之后
$(‘#box‘).slideUp(‘slow‘).slideDown(‘slow‘).queue(function () {
    $(this).css(‘background‘, ‘orange‘);
});
//如果函数执行后要继续队列，则执行next()或jQuery(this).dequeue();
$(‘#box‘).slideUp(‘slow‘).slideDown(‘slow‘).queue(function (next) {
    $(this).css(‘background‘, ‘orange‘);
    next();
}).hide(‘slow‘);
$(‘#box‘).slideUp(‘slow‘).slideDown(‘slow‘).queue(function () {
    $(this).css(‘background‘, ‘orange‘);
    $(this).dequeue();   //next 函数是jQuery1.4 版本以后才出现的，而之前我们普遍使用的是.dequeue()方法
}).hide(‘slow‘);
//使用顺序调用的列队，逐个执行，非常清晰
$(‘#box‘).slideUp(‘slow‘);
$(‘#box‘).slideDown(‘slow‘);
$(‘#box‘).queue(function () {
    $(this).css(‘background‘, ‘orange‘);
    $(this).dequeue();
})
$(‘#box‘).hide(‘slow‘);

三、和动画相关的过滤器和方法

3.1 :animated

这个过滤器可以判断出当前运动的动画是哪个元素。通过这个特点，我们可以避免由于用户快速在某个元素执行动画时，由于动画积累而导致的动画和用户的行为不一致。

//递归执行自我，无线循环播放
$(‘#box‘).slideToggle(‘slow‘, function () {
    $(this).slideToggle(‘slow‘, arguments.callee);
});
//停止正在运动的动画，并且设置红色背景
$(‘.button‘).click(function(){
    $(‘div:animated‘).stop().css(‘background‘, ‘red‘);   
});