RIA应用开发：6-jQuery动画效果.ppt

文档介绍：第六章 jQuery动画效果
回顾
页面载入事件（ready()）
事件处理（bind()、 unbind()、one()）
事件委派（live()、die()）
事件切换（hover()、toggle()）
常用事件
浏 $(this).fadeIn("slow");
var next=
($(this).next().length)?$(this).next():$(".imge:first");
$(this).fadeOut("slow");
("slow");
return false;
} );
向下滑动
对于处于隐藏状态的元素，使用slideDown方法可以将其显示出来，并且添加向下滑动的动画效果。
slideDown([duration][,callback])
duration:字符串或数字，指定动画的持续时间
callback：指定动画完成后要调用的函数
向上滑动
对于页面中的可见元素，可以使用slideup方法将匹配的元素隐藏起来并在隐藏过程中添加向上滑动效果。
slideUp([duration][,callback])
duration:字符串或数字，指定动画的持续时间
callback：指定动画完成后要调用的函数
切换滑动
如果要在下滑显示和上滑隐藏两种动画效果之间进行切换，可以通过slideToggle方法来实现。
slideToggle([duration][,callback])
duration:字符串或数字，指定动画的持续时间
callback：指定动画完成后要调用的函数
滑动效果
例：导航效果
$("#navigation ul li:has(ul)").hover(
function(){ $(this).children("ul").slideDown(400); } ,
function(){ $(this).children("ul").slideUp("fast");});
自定义动画
show()和hide()同时修改元素的高度、宽度和不透明度；fadeIn()和fadeout()仅修改不透明度；slideDown()和slideup()仅修改高度。
animate()方法用于改变匹配元素的一组CSS属性，并生成自定义动画效果。
animate(properties, [duration], [easing], [callback])
properties：包含css样式属性及其目标值的映射
duration:字符串或数字，指定动画的持续时间
easing：指定过渡效果使用的缓动函数
callback：指定动画完成后要调用的函数
自定义动画
animate(properties, options)
自定义动画
例：水平滚动图片，鼠标悬停时停止滚动。
var $wrapper=$("#images a img");
$({left:0});
var animator=function(imgblock){
( {left:-800},8000,function(){
({left:450});
animator($(this)); });
}
animator($wrapper);
$(function(){$();},
function(){ animator($wrapper);});
自定义动画
例：
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index); }).eq(0).mouseover();

})
function showImg(index){
var adHeight = $(".ad").height();
$(".slider").stop(true,false).animate({top : -adHeight*index},1000);
$(".num li").removeClass("on")
.eq(i