jQuery动画与特效
kwenLee 2011-10-05
back>>
1. 显示与隐藏
show(speed,[callback])与hide(speed,[callback])方法
show()函数等价于$("p").css("display":"block")
hide()函数等价于$("p").css("display":"none")
speed有三个默认字符值：slow(0.6秒)，normal(0.4秒)，fast(0.2秒)$(function() {
$("a").click(function() {//显示链接点击事件
$("img").show(3000, function() {//显示完成时执行的函数
$(this).css("border", "solid 1px #ccc");
})
})
$("img").click(function() {//显示图片的点击事件
$(this).hide(3000);//动画效果隐藏
})
})
toggle()方法，自动切换元素的显示状态
toggle(switch)，switch为true，显示元素，为false隐藏元素
toggle(speed,[callback])$(function() {
$("input:eq(0)").click(function() { //无参数方法
$("img").toggle();
})
$("input:eq(1)").click(function() { //根据参数switch显示
var intI = 0;
var blnA = intI > 1; //获取逻辑值
$("img").toggle(blnA);
})
$("input:eq(2)").click(function() { //动画方式显示
$("img").toggle(3000, function() {
$(this) //以动画方式显示,并执行回调函数
.css({ "border": "solid 1px #ccc", "padding": "2px" });
});
})
})2. 滑动
slideDown(speed,[callback])，以动画效果将所选择元素的高度向下增大，元素的其它属性不发生变化。callback在动画效果结束后调用。
slideUp(speed,[callback])以动画效果将所选择元素的高度向上减小
slideToggle(speed,[callback])方法，会根据当前元素的显示状态，自动进行切换$("img").slideUp(3000, function() {
$Tip.html("关闭成功！");
})
$("img").slideToggle(3000, function() {
$("img").css("border", "solid 1px #ccc");
})3. 淡入淡出
fadeIn(speed,[callback])通过改变元素的透明度，实现淡入效果，从0.0到1.0
fadeout(speed,[callback])通过改变元素的透明效果，实现淡出效果，从1.0到0.0
与show()和hide()相比，它仅改变元素的透明度，不改变元素的其它属性，而后者改变了元素的width和height属性。
fadeTo(speed,opacity,[callback])将透明度指定到特定的值img.fadeIn(3000, function() {
$tip.html("淡入成功！");
})
img.fadeTo(3000, 0.6);
4.自定义动画
animate(params,[duration],[easing],[callback]) params表示用于制作动画效果的属性样式和值的集合，[duration]值为slow，normal，fast或自定义的数字。[easing]为动画插件使用，用于控制动画的表现效果，通常有linear和swing字符值。自定义动画一： divFrame在3秒内，元素宽度变为20%，高度变为70px
$(function() {
$(".divFrame").click(function() { //div元素点击事件
$(this).animate({ //宽与高变化的动画效果
width: "20%",
height: "70px"
},
3000, function() { //动画完成后执行的回调函数
$(this).css({ "border": "solid 3px #666" })
.html("变大了！");
})
})
})自定义动画二：移动位置 左移，右移
$(function() {
$("input:eq(0)").click(function() { //左移按钮点击事件
//在3000毫秒内，以动画的形式.divList元素向左移动52个像素
$(".divList").animate({ left: "-=52px" }, 3000);
})
$("input:eq(1)").click(function() { //右移按钮点击事件
//在3000毫秒内，以动画的形式.divList元素向右移动52个像素
$(".divList").animate({ left: "+=52px" }, 3000);
})
})
自定义动画三：队列中的动画 在指定的元素上指定一个以上的多个动画效果，以动画效果将宽高在原来的基础上增大一倍，然后再以动画的效果将宽高在原有的基础上减小一倍
$(function() {
$("div").click(function() { //div块单击事件
$(this)
.animate({ height: 100}, "slow") //第1列
.animate({ width: 100 }, "slow") //第2列
.animate({ height: 50 }, "slow") //第3列
.animate({ width: 50 }, "slow"); //第4列
})
})动画的停止和延时： stop([clearQueue],[gotoEnd])，停止所选元素中正在执行的动画，其中可选参数[clearQueue]是个布尔值，表示是否停止正在执行的动画。[gottoEnd]也是布尔值，表示是否立即完成正在执行的动画
delay(duration,[queueName])设置一个延时值来推迟后续队列中动画的执行，duration为延时时间值，单位毫秒。[queueName]表示队列名词，即动画队列：
$(function() {
$("a:eq(0)").click(function() { //点击"开始"链接事件
$("img").slideToggle(3000); //"拉窗帘"方式切换图片
})
$("a:eq(1)").click(function() { //点击"停止"链接事件
$("img").stop(); //停止正在执行的动画
})
$("a:eq(2)").click(function() { //点击"延时"链接事件
$("img") //延时切换图片
.delay(2000)
.slideToggle(3000);
})
})5. 自定义动画代替特定的动画效果
-animate()代替hide()
$("页面元素").animate({height:"hide",width:"hide",opacity:"hide"},600)
等价于
$("页面元素").hide(600)- animate()替代fadeOut()方法
$("页面元素").animate({opacity:"hide"},600)
等价于
$("页面元素").fadeOut(600)
-animate()替代slideUp()方法
$("页面元素").animate({height:"hide"},600)
等价于
$("页面元素").slideUp(600)- animate()替代fadeTo()方法
$("页面元素").animate({opacity:"0.8"},600)
等价于
$("页面元素").fadeTo(600,"0.8")
6.动画效果浏览相册中的图片
