动画、队列、隐藏显示、滑动、消失
animate() //执行css属性集的自定义动画。只有数字值可创建动画(比如:“margin:30px”)
字符串值无法创建动画(比如“background-color:red”)
提示:请使用 “+=”或“-=”来创建相对动画
(selector).animate( { styles } ,speed , easing , callback )
$("#btn1").click(function(){
$("#box").animate({height:"300px"},1000);
});
delay() //对下一项的执行设置延迟
$("button").click(function() {
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(1000).fadeIn();
})
stop() //停止当前正在运行的动画
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#stop").click(function(){
$("div").stop();
});
finish() //停止当前运动的动画,移除所有排队的动画,并为被选元素完成所有动画
(动画执行中突然停止并呈现所有动画完成的效果)
$("#start").click(function(){
$("div").animate({height:300},3000);
$("div").animate({width:300},3000);
});
$("#complete").click(function(){
$("div").finish();
});
clearQueue() //从尚未运行的函数对列中移除所有项目。注意,当函数开始运行时,它会一直运行直到完成
$("#start").click(function(){
$("div").animate({height:300},1500);
$("div").animate({width:300},1500);
$("div").animate({height:100},1500);
$("div").animate({width:100},1500);
});
$("#stop").click(function(){
$("div").clearQueue();
});
<button id="start">开始动画</button>
<button id="stop">停止动画</button>
queue() //显示被选元素上要执行的函数队列
$("button").click(function(){
var div = $("div");
div.animate({height:300},"slow");
div.animate({height:100},"slow");
div.animate({width:100},"slow");
$("span").text(div.queue().length); //3
});
dequeue() //queue()方法允许你创建一个队列功能区执行被选中的元素,
dequeue()方法顺序执行它们
$("#start").click(function(){
var div = $("div");
div.animate({height:300},"slow");
div.animate({width:300},"slow");
div.queue(function () {
div.css("background-color","red");
div.dequeue();
});
div.animate({height:100},"slow");
div.animate({width:100},"slow");
});
hide() //隐藏被选元素
show() //显示被选元素
$(".btn1").click(function(){
$("p").hide(300);
});
$(".btn2").click(function(){
$("p").show();
});
toggle() //在被选元素上进行hide()和show()之间的切换
$("button").click(function(){
$("p").toggle(200);
});
slideDown() //以滑动的方式显示被选元素
slideUp() //以滑动的方式隐藏被选元素
slideToggle() //slideUp()和slideDown()之间切换
$(".btn1").click(function(){
$("p").slideUp();
});
$(".btn2").click(function(){
$("p").slideDown();
});
fadeIn() //淡入效果显示元素
$(selector).fadeIn(speed,easing,callback)
fadeOut() //淡出效果删除元素
$(selector).fadeOut(speed,easing,callback)
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn(3000);
});
fadeToggle() //方法在fadeIn()和fadeOut()方法之间切换
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fadeTo() //逐渐改变被选元素的透明度到指定的值(褪色效果)
$("button").click(function() {
$("p").fadeTo(1000,0.4)
})