jQuery动画与特效
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. 动画效果浏览相册中的图片