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", width:"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)来让当前动画直接到达末状态