animate

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");
});