该章节主要罗列jQuery里面的动画效果。
1 .show([duration][,callback]);
该方法主要用于显示对象 duration是指显示对象的执行时间(毫秒),callback是指显示完成后执行的方法
1).show();//直接显示对象
2).show(200,function(){alert("显示完成");});
2.hide([duration][,callback]);
该方法主要用于隐藏对象 参数以及使用方法与.show()一致
3.toggle()
切换对象显示与隐藏
1).toggle() //切换显示与隐藏
2).toggle(boolean)根据bool值去执行显示与隐藏 true:显示 false:隐藏
3).toggle([duration][,callback]);
4.fadeIn([duration][,callback]);
淡入效果,慢慢的显示对象
5.fadeOut([duration][,callback]);
淡出效果,慢慢隐藏对象
6.fadeTo(duration,opacity[,callback]);
调整对象透明度 其中duration 是设置动画的时间,opacity是设置透明度0-1,callback是动作执行完后执行的方法
例:
$("#div1").fadeTo(2000,0.5,function(){alert("执行完毕");});
7.slideDown([duration][,callback]);
向下滑动显示出隐藏的对象
8.slideUp([duration][,callback]);
向上滑动隐藏对象
9.sildeToggle([duration][,callback]);
切换滑动显示与隐藏对象
10.animate(properties[,duration][,easing][,callback]);
.animate(properties,options);
自定义动画 其中properties是一个包含CSS样式目标值的映射,duration是执行动画指定的时间,easing是值进行缓动的方式(在后面会介绍),callback是执行完动画后会调用的方法
options是Map类型 可以给amimate方法传递 duration、easing、callback等参数
例:
$("#div1").animate({"68%",opacity:0.4,marginLeft:"0.6in",fonSize:"3em",borderWidth:"10px;"},1500);
$("#div1").animate({opacity:0.25,left:"+=50",height:"toggle"},5000,function(){alert("执行完毕!");});
注:在使用left属性时需要将对象div1进行相对或绝对定位, 这里的 toggle是指 第一次将高度 变为0 第二次将高度还原。而left会每次增加50
11.queue()
该方法用于管理动画队列
1).queue([queueName]);用于获取该对象的 执行函数长度 其queueName是指队列名称的字符串
例:
$("#div1").slideUp().fadeIn();
var n=$(#div1).queue("fx");//获取该对象的执行函数队列
n.length// 2 函数长度(数量)
$("#div1").queue("fx",[]);//清空该对象的执行函数
$("#div1").queue(function(){ //像该对象附加一个执行函数
$(this).toggleClass("red");
$(this).dequeue(); //对当前匹配元素执行下一个函数,目的是为了保证函数队列可以继续移动。
});
12.delay()
该方法用于延迟函数队列中的后续函数
例:
$("#div1").slideUp(300),delay(5000),fadeIn(400);
13.clearQueue()
该方法是指从函数队列中移除所有尚未执行的函数
例:
$("#div1").clearQueue();
14.stop([clearQueue][,jumpToEnd])
该方法用于停止匹配元素当前正在运行的动画
其中:clearQueue 是一个bool值 指是否在停止动画的同时清除动画队列默认值为false不清空,jumpToEnd也是一个bool值指示是否立即完成当前动画,默认值为false
例:
$("#div1").stop();
$("#div1").stop(true,true);
15 .off属性
off属性是全局jQuery对象的一个属性,可用与禁止所有动画。
语法:jQuery.fx.off 该属性为bool值 若设置为true 则将立即完成所有动画到目标状态,而不会显示任何效果.
若设置为false 则还可以重新运行动画效果.
例:$.fx.off=true;