jquery动画
显示与隐藏
//若是不写时间,则没有过度动画效果
$('div').show(1000);//显示
$('div').hide(1000);//隐藏
$('div').toggle(1000);//自动判断显示还是隐藏
淡入与淡出
$('div').fadeOut(1000);//淡出
$('div').fadeIn(1000);//淡入
$('div').fadeToggle(1000);//自动判断淡出还是淡入
$('div').fadeTo(1000,0.3);//透明度到0.3的时候动画停止
滑动
$('div').slideDown(1000);
$('div').slideUp(1000);
$('div').slideToggle(1000);
停止动画
$('div').stop();//停止所有动画
$('div').stop(true);//停止当前动画,其他动画不影响
$('div').stop(true,true);//停止所有动画,但是所有动画都立刻显示最终效果
自定义动画
//一定要用{}将多个css样式括起来
$('div').animate({
left:"+=200px",//要记得首先把元素position 属性设置为 relative、fixed 或 absolute
opacity:0.3,
borderRadius:"10px"//对于带有“-”的属性,必须使用驼峰命名法
});
动画队列,将多组动画按顺序播放
$("button").click(function(){
var div=$("div");
//动画队列
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});