hide() 和 show() // 同时修改多个样式属性，即高度、宽度和不透明度 速度参数：slow-0.6s normal-0.4s fast-0.2s fadeIn() 和 fadeOut() //只改变不透明度 slideDown() 和 slideUp() //只改变高度 fadeTo() //只改变不透明度，把元素的不透明度以渐进方式调整到指定值 toggle() //用来代替hide()方法和show()方法，所以会同时修改多个样式属性，即高度、宽度和不透明度 slideToggle() //用来代替slideDown() 和 slideUp(),只改变高度 fadeToggle() //用来代替fadeIn() 和 fadeOut() 只改变不透明度 animate() //属于自定义动画的方法，以上各种动画方法实质内部都调用了animate()方法,是animate()方法的一种内置了特定样式属性的简写形式
animate(params,speed,callback); params: 一个包含样式属性及值的映射，如{left:"500px",height:"200px",....} speed: 速度参数，可选 callback : 回调函数，在动画完成是执行的函数，可选 eg: $("panel").click(function(){ $(this).animate({left:"400px", height:"200px", opacity:"1"},300) .animate({top:"200px", "200px"}, 300, function(){ $(this).css("border", "5px solid blue"); //css()为非动画方法，不会加入到动画队列中，而是立即执行。所以要想在动画结束后再执行css样式，需把css()方法放在回调函数中 }) });
动画队列
一组元素上的动画效果
- 当一个animate()方法中应用多个属性时，动画是同时发生的；所以要按顺序执行动画，如先改变高度，再改变宽度，需把代码拆开，写两个animate()
- 当用链式的写法应用动画方法时，动画时按照顺序发生的
判断是否处于动画状态
if( !$("element").is(":animate")){ //判断元素是否处于动画状态 //如果当前没有进行动画，则添加新动画 }
停止元素的动画
stop([clearQueue],[gotoEnd]) clearQueue : true/false 可选，是否清空未执行完的全部动画队列 默认为false，此时只会结束当前动画，并立即执行队列中的下一个动画 gotoEnd : true/false 可选，是否直接将正在执行的动画跳到结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true)来让当前动画直接到达末状态