一、基础动画
|
方法名 |
说明 |
| 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 淡入、淡出
$(‘.toggle‘).click(function () { $(‘#box‘).fadeTo(‘slow‘, 0.33); //0.33 表示值为33 });
二、自定义动画
animate(params,[speed],[easing],[fn])
2.1 操作多个属性——params
$("button").click(function(){
$("div").animate({
left:‘250px‘,
opacity:‘0.5‘,
height:‘150px‘,
width:‘150px‘
});
});
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])
$(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()) —— 显示或操作在匹配元素上执行的函数队列
④ 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”);
四、动画全局属性
jQuery学习小结2——动画,布布扣,bubuko.com
原文：http://www.cnblogs.com/JoannaQ/p/3665238.html