冒泡泡de可乐
代码都是思想和概念的体现~每多学一点知识,就能少写一行代码~
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)来让当前动画直接到达末状态

 

posted on 2018-09-11 11:50  HathawayLee  阅读(137)  评论(0编辑  收藏  举报