第五章 用动画和特效装扮页面
1. 显示和隐藏元素
1.1 可折叠的模块
$('div.caption img').click(function(){
var body$ = $(this).closest('div.module').find('div.body');
if (body$.is(':hidden'))
body$.show();
else
body$.hide();
});
1.2 切换元素的显示状态
用 toggle() 简化代码：
$(function(){
$('div.caption img').click(function(){
$(this).closest('div.module').find('div.body').toggle();
});
});
2. 用动画改变元素的显示状态
2.1 渐变
show(speed, callback)
hide(speed, callback)
toggle(speed, callback)
speed - 毫秒数，或预定义字符串：slow, normal, fast
callback - 回调，无参数，this 为当前执行动画的元素，每个元素动画执行完成时回调。
toggle(condition) 条件为 true 时显示元素，否则隐藏元素。
可折叠模块的动画版本：
$(function() {
$('div.caption img').click(function(){
$(this).closest('div.module').find('div.body')
.toggle('slow', function(){
$(this).closest('div.module')
.toggleClass('rolledup', $(this).is(':hidden'));
});
});
});
2.2 淡入淡出
show() 和 hide() 不仅缩放元素大小，还会调整不透明度。淡入淡出只影响元素的不透明度。
fadeIn(speed, callback)
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)
2.3 上下滑动元素
slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)
2.4 停止动画
stop(clearQueue, gotoEnd)
clearQueue - true表示不仅停止当前动画，而且停止在动画队列中正在等待执行的所有其他动画
gotoEnd - true 表示使当前动画执行到其逻辑结束
禁止所有的动画：将 jQuery.fx.off 设置为 true 将导致所有的特效立即发生，没有动画过程。
3. 创建自定义动画
animate(properties, duration, easing, callback)
animate(properties, options)
properties - 指定动画结束时所支持的CSS样式应该达到的值
duration - 毫秒或：slow, normal, fast
easing - 函数名称，用于指定动画缓动特效，通过由插件提供
callback - 动画结束时回调函数
options - 支持属性：duration, easing, complete, queue, step
3.1 自定义缩放动画
$('.animateMe').each(function(){
$(this).animate({
$(this).width() * 2,
height: $(this).height() * 2
},
2000
);
});
3.2 自定义掉落动画
$('.animateMe').each(function(){
$(this)
.css('position', 'relative')
.animate(
{
opacity: 0,
top: $(window).height() - $(this).height - $(this).position().top
},
'slow',
function(){ $(this).hide(); }
);
});
3.3 自定义消散动画
$('animateMe').each(function() {
var position = $(this).position();
$(this)
.css({position: 'absolute',
top: position.top,
left: position.left})
.animate(
{
opacity: 'hide',
$(this).width() * 5,
height: $(this).height() * 5,
top: position.top - ($(this).height() * 5 / 2),
left: position.left - ($(this).width() * 5 / 2)
},
'normal');
});
4. 动画和队列
4.1 并发的动画
animate() 方法创建的动画在页面运行时不会阻塞代码的执行，其他动画也一样。
多个并发动画的实现逻辑：
$('#startButton').click(function(){
say(1);
$("img[alt='moon']").animate({left:'+=256'},2500};
say(2);
$("img[alt='moon']").animate({top:'+=256'},2500};
say(3);
$("img[alt='moon']").animate({left:'-=256'},2500};
say(4);
$("img[alt='moon']").animate({top:'-=256'},2500};
say(5);
});
在 jQuery 内部，动画被放入队列并按顺序执行它们。
4.2 将函数排队执行
添加函数到队列：
queue(name)
queue(name, function)
queue(name, queue)
执行队列中的函数：
dequeue(name)
$(function() {
$('img').queue('chain',
function(){ say('First: ' + $(this).attr('alt')); });
$('img').queue('chain',
function(){ say('Second: ' + $(this).attr('alt')); });
$('img').queue('chain',
function(){ say('Third: ' + $(this).attr('alt')); });
$('img').queue('chain',
function(){ say('Fourth: ' + $(this).attr('alt')); });
$('button').click(function(){
$('img').dequeue('chain');
});
});
这需要点击按钮4次才能执行完队列中的函数，改为自动触发下一队列函数的执行：
$(function() {
$('img').queue('chain',
function(){
say('First: ' + $(this).attr('alt'));
$(this).dequeue('chain');
});
$('img').queue('chain',
function(){ say('Second: ' + $(this).attr('alt')); $(this).dequeue('chain');});
$('img').queue('chain',
function(){ say('Third: ' + $(this).attr('alt')); $(this).dequeue('chain');});
$('img').queue('chain',
function(){ say('Fourth: ' + $(this).attr('alt')); $(this).dequeue('chain');});
$('button').click(function(){
$('img').dequeue('chain');
});
});
清除没有执行的队列函数
clearQueue(name)
延迟队列函数之间的执行
delay(duration, name)
duration - 毫秒或 'fast', 'slow'，表示200毫秒和600毫秒
4.3 插入函数到特效队列
$("img[alt='moon']").animate({left:'+=256'},2500};
$("img[alt='moon']").animate({top:'+=256'},2500};
$("img[alt='moon']").queue('fx', function() {
$(this).css({'backgroundColor':'black'});
$(this).dequeue('fix');
});
$("img[alt='moon']").deanimate({left:'-=256'},2500};
$("img[alt='moon']").animate({top:'-=256'},2500};