jQuery学习小结2——动画
一、基础动画
| 方法名 |
说明 |
| show([speed,[easing],[fn]]) hide([speed,[easing],[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]]) |
|
| fadeTo([[speed],opacity,[easing],[fn]]) |
|
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'); });
3.2 判断元素是否在动画状态的方法
$(element).is(“:animated”);
四、动画全局属性
- $.fx.interval，设置每秒运行的帧数，默认为13 毫秒。数字越小越流畅，但可能影响浏览器性能
- $.fx.off，关闭页面上所有的动画