1.jQuery效果操作
基本
show([s,[e],[fn]]) 显示隐藏的匹配元素。
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 切换显示/隐藏
滑动
slideDown([s],[e],[fn]) 高度由0增大到原本高度来显示
slideUp([s,[e],[fn]]) 高度逐渐变为0来隐藏
slideToggle([s],[e],[fn]) 切换显示/隐藏(高度变化)
淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]]) 指定目标透明度的淡入淡出
fadeToggle([s,[e],[fn]]) 切换淡入淡出
s: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
e: (Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn: 在动画完成时执行的函数,每个元素执行一次。
o: 一个0至1之间表示透明度的数字。
<html>
<p style="width:200px;height: 100px;background: red;"></p>
<button id="bt1">显示</button>
<button id="bt2">隐藏</button>
<button id="bt3">切换</button>
</html>
<script>
$("#bt1").click(function(){ //点击后p显示,即设置 display:block;
$("p").show();
})
$("#bt2").click(function(){ //点击后p隐藏,即设置 display:none;
$("p").hide();
})
$("#bt3").click(function(){ //点击,p来回切换显示/隐藏,
$("p").toggle("fast");
})
$("p").hide("fast"); //p的宽高在200毫秒内同时减小到0,然后设置 display:none;
$("p").hide(1000); //p的宽高在1000毫秒内同时减小到0,然后设置 display:none;
$("p").hide(1000,function(){ //当p隐藏后弹出1(在p宽高都为0时,在display:none之前执行)
alert(1)
});
$("p").hide(1000,"linear",function(){ //整个过程是匀速的
alert(1)
});
//其它使用同理, 注:无论怎样的方式,在元素看不见后都会添加属性 display:none;
</script>
自定义
animate(p,[s],[e],[fn]) 1.8*创建自定义动画
stop([c],[j]) 1.7*停止所有在指定元素上正在运行的动画。
delay(d,[q]) 设置一个延时来推迟执行队列中之后的项目。
finish([queue]) 1.9+停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。
p: 一组包含作为动画属性和终值的样式属性和及其值的集合
s: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
e: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn: 在动画完成时执行的函数,每个元素执行一次。
c: 默认false,如果设置成true,则清空队列。可以立即结束动画。
j: 默认false,如果设置成true,则完成队列。可以立即完成动画。
d: 延时时间,单位:毫秒
q: 队列名词,默认是Fx,动画列队
<html>
<p style="width:200px;height: 100px;background: red;"></p>
<button id="bt1">显示</button>
<button id="bt2">隐藏</button>
<button id="bt3">切换</button>
</html>
<script>
$("#bt1").click(function(){ //点击按钮后,1000毫秒内,p宽变为100,高变为50
$("p").animate({width:100,height:50},1000);
})
$("p").animate({marginLeft:"500px"},1000); //所有指定的属性必须用骆驼形式
$("p").animate({marginLeft:"500px"},1000,"linear"); //匀速执行
$("p").animate({marginLeft:"500px"},1000,"linear",function(){
alert(1); //执行完毕后弹出 1
});
$("#bt1").click(function(){ //每次点击按钮后,p的宽度增加50px
$("p").animate({width:"+=50px"},1000);
})
//累加写法:
$("div").animate({ width:"+=200" },500) //每次宽度增加200
//关键字写法:
$("div").animate({ width:"hide" },500) //即宽度为0 (其他关键字:toggle)
$("p").stop(); //停止p正在执行的动画,如果是列队动画则立刻执行后列动画。
$("p").stop(true); //停止p的所有动画,p的状态保留在此一刻。
$("p").stop(true, true); //停止p的所有动画,p的状态立刻变为该列动画最终形态(不是最后列的最终形态)。
$("p").finish(); //停止p的所有动画,p的状态立刻变为整列动画最终形态(即最后列的最终形态)。
$("p").hide().delay(1000); //延迟1000毫秒执行hide()
//1.立即停止当前,继续执行后续动画
$("div").stop();
$("div").stop( false );
$("div").stop( false, false );
//2.立即停止当前和后续所有的动画
$("div").stop( true );
$("div").stop( true, false );
//3.立即完成当前的,继续执行后续的动画
$("div").stop( false, true );
//4.立即完成当前的,并停止后续所有的动画
$("div").stop( true, true );
</script>
注:良好的书写习惯,开启动画之前先清除所有动画,防止产生BUG:
设置
jQuery.fx.off 关闭页面上所有的动画。
jQuery.fx.interval 设置动画的显示帧速。
//例如当动画执行因浏览器版本问题造成页面混乱时可使用:
jQuery.fx.off=true; //关闭页面所有动画,直接变成动画最终形态
jQuery.fx.off=false; //开启所有动画
//设置动画的显示帧速:
jQuery.fx.interval=50; //将帧速设为50,帧速默认值为13,值越小对浏览器的性能要求越高
队列控制
queue(e,[q]) 显示或操作在匹配元素上执行的函数队列
dequeue([queueName]) 从队列最前端移除一个队列函数,并执行他
clearQueue([queueName]) 清空对象上尚未执行的所有队列
e: 检查附加列队的DOM元素
q: 字符串值,包含序列的名称。默认是 fx, 标准的效果序列。
queueName: 队列名,默认为fx
列队控制举例:
<html>
<p style="width:200px;height: 100px;background: red;"></p>
<button id="bt1">显示</button>
<button id="bt2">隐藏</button>
<button id="bt3">切换</button>
</html>
<script>
$("div").animate({width:"200px"}).css("background","blue");
//由于css()不是动画会先执行,所以div先变为蓝色再执行动画
//解决办法1:使用回调函数
$("div").animate({width:"200px"},function(){
$(this).css("background","blue") //先执行动画,最后变蓝色
});
//解决办法2:使用queue()
$("div").animate({width:"200px"}).queue(function(){
$(this).css("background","blue") //先执行动画,最后变蓝色
});
//先执行动画,然后变蓝色,再执行下一个动画 (新版本写法)
$("div").animate({width:"200px"}).queue(function(next){
$(this).css("background","blue");
next();
}).animate({height:"100px"});
//先执行动画,然后变蓝色,再执行下一个动画 (旧版本写法)
$("div").animate({width:"200px"}).queue(function(){
$(this).css("background","blue");
$(this).dequeue();
}).animate({height:"100px"});
//列队动画个数,停止操作
$("#bt1").click(function(){
$("div").animate({width:"200px"}); //动画1:宽度变为200px
$("div").animate({height:"100px"}); //动画2:高度变为100px
$("div").queue(function () { //动画3:(queue算一个动画)
var n=$("div").queue("fx");
alert(n.length); //中途弹出:3 (剩余列队个数)
$(this).dequeue();
});
$("div").fadeOut(); //动画4:淡出
$("div").slideDown(); //动画5:淡入
var n=$("div").queue("fx");
alert(n.length); //最先弹出:5 (共5列动画)
})
$("#bt2").click(function(){
$("div").queue("fx", []); //清空列队,正在执行的此列动画会执行完
$("div").stop(); //停止动画,停在此刻状态
})
//使用clearQueue()清除后面列队动画
$("div").animate({width:"200px"}).queue(function(){
$(this).css("background","blue");
$(this).clearQueue();
}).animate({height:"100px"}); //变蓝色后便停止,后面的不执行
</script>