内置动画:
当前这一波动画效果为:显示或隐藏
固定的,只能显示,或隐藏
而且,方向不可改变,大小不可改变
除了运动时间,什么都不能改
点击隐藏
$("#btn1").click(function(){
$("#box").hide(200,“linear”,function(){
console.log("动画结束了
});
})
点击显示动画
$("#btn2").click(function(){
$("#box").show(200);
})
点击显示或隐藏
$("#btn3").click(function(){
$("#box").toggle(200);
})
点击动画上拉
$("#btn4").click(function(){
$("#box").slideUp(1000);
})
点击动画下拉
$("#btn5").click(function(){
$("#box").slideDown(1000);
})
点击上拉或下拉
$("#btn6").click(function(){
$("#box").slideToggle(1000);
})
淡出,淡入
$("#btn7").click(function(){
$("#box").fadeOut();
})
$("#btn8").click(function(){
$("#box").fadeIn();
})
$("#btn9").click(function(){
$("#box").fadeToggle();
})
$("#btn10").click(function(){
$("#box").fadeTo(1000,0.3);//第一个参数为动画从开始到结束的时间,第二个参数为透明度
})
自定义动画
$("#box").click(function(){
$("#box").animate({
width:0,
height:0,
top:80,
left:50
},1000,function(){
console.log(“结束”);
});
链式动画:一个动画结束后,开启另一个元素的动画
$("#btn1").click(function(){
$("#box").animate({
left:500
}).animate({
top:500
}).animate({
left:0
}).animate({
top:30
})
})
animate与animate之间是同步执行
animate与其他方法(css)是异步执行
$("#box").animate({
left:500
}).animate({
top:500
}).css({
background:“yellow”
})
如果想要让animate与css同步执行需要使用queue,或使用回调函数,queue是为了异步转同步而生
$("#box").animate({
left:500
}).animate({
top:500
}).queue(function(next){
$("#box").css({
background:“yellow”
})
next();
}).animate({
left:0
})
});
动画延迟:
$("#box").delay(1000).animate({left:100});//1秒后执行动画
停止动画:
$("#box").click(function(){
$("#box").stop();
})
直接运动到最后一个动画的终点:
$("#box").click(function(){
$("#box").finish();
})