jQuery动画

一,show()和hide()方法
  show()方法中传人参数slow,normal,fast,可以指定数字,表示显示速度
  hide()方法中传人参数slow,normal,fast,可以指定数字,表示消失速度
二,fadeIn()和fadeOut()方法
  指定不透明度
  fadeOut(),在指定的时间内,减低元素的不透明度,直到完全消失
  fadeIn(),在指定的时间内,增加元素的不透明度,直到完全显现
三,slideUp()和slideDown()方法
  改变元素的高度
  slideDown(),对于display为none的元素,由上至下的延伸显示
  slideUp(),对于display为none的元素,由下至上的延伸显示
四,自定义动画animate()
  语法结构,animate(params,speed,callback)
    params:包含样式属性及值的映射{property:"value1",property:"value2"}
    speed:速度参数,可选
    callback:在动画完成时执行的函数,可选
  1,自定义简单动画
  animate({left:"500px"},300);移动到指定位置
  2,累加累减动画
  animate({left:"+=500px"},400);当前位置累加500px
  3,多重动画
  animate({left:"400px",right:"400px"},500);
  4,综合动画
  $(this).animate({left:"400px",height:"400px",opacity:"1"},3000).animate({top:"200px",width:"200px"},2000).fadeout("slow");
五,动画回调函数
  动画执行结束后执行的函数
  $(this).animate({},100,function(){$(this).css("border","5px solid blue");});
六,停止动画和判断是否处于动画状态
  1,停止动画
  stop([clearQueue].[gotoEnd]);立即停止当前正在进行的动画
  clearQueue为布尔值,表示是否清空未执行的动画队列
  gotoEnd为布尔值,表示是否直接将正在执行的动画跳转到末状态
  2,判断是否处于动画状态
  is(":animated")
  if(!$(element).is(":animated")){//如果当前没有处于动画状态}
  3,延迟动画
  delay()方法,传人延迟时间
  $(this).animate({left:"400px",height:"200px"},200).delay(1000);
七,其他动画方法
  1,toggle()方法,切换元素的可见状态
  $(this).next().toggle();
  2,slideToggle()方法
  通过高度变化来切换匹配元素的可见性
  $(this).next().slideToggle()
  3,fadeTo()方法
  通过切换元素的不透明度以渐进方式调整到指定值
  $(this).next().fadeTo(600,0.2)
  4,fadeToggle()方法
  通过不透明变化来切换匹配元素的可见性
  $(this).next().fadeToggle()
八,动画方法概况
  1,一组元素上的动画效果
  在一个animate()方法中应用多个属性,动画是同时发生的
  以链式的写法应用动画,是按顺序执行的
  2,多组元素上的动画效果
  默认情况都是同时发生的
  以回调的形式应用动画方式时(动画的回调函数和queue方法的回调函数),动画按回调顺序发生的

posted on 2014-04-19 21:20  哈哈李小博  阅读(98)  评论(0编辑  收藏  举报