jQuery动效

一. jQuery显示和隐藏动画

• show(): 显示

  $(\'button\').eq(0).click(function(){$(\'div\').show(1000,function(){alert(\'显示动画完毕\')})})

  格式：show(毫秒, fn) fn在动画执行完毕会执行
  

• hide(): 隐藏

  $(\'button\').eq(1).click(function () {$(\'div\').hide(1000, function () {alert(\'隐藏动画完毕\')})})

  格式: hide(毫秒, fn) fn在动画执行完毕会执行
  

• toggle(): 切换

  $(\'button\').eq(2).click(function () {$(\'div\').toggle(1000, function () {alert(\'切换动画完毕\')})})

  格式: toggle(毫秒, fn) fn在动画执行完毕会执行
  

二. jQuery展开和收起动画

• slideDown(): 展开

  $(\'button\').eq(0).click(function(){$(\'div\').slideDown(1000, function(){alert(\'展开完毕\')})})

  

• slideUp(): 收起

  $(\'button\').eq(1).click(function () {$(\'div\').slideUp(1000, function () {alert(\'收起完毕\')})})

  

• slideToggle(): 切换展开收起

  $(\'button\').eq(2).click(function () {$(\'div\').slideToggle(1000, function () {alert(\'切换完毕\')})})

  

三. jQuery淡入淡出动画

• fadeIn方法: 淡入

  $(\'button\').eq(0).click(function(){$(\'div\').fadeIn(1000, function(){alert(\'淡入完毕\')})})

• fadeOut方法: 淡出

  $(\'button\').eq(1).click(function () {$(\'div\').fadeOut(1000, function(){alert(\'淡出完毕\')})})

  

• fadeToggle方法: 切换

  $(\'button\').eq(2).click(function () {$(\'div\').fadeToggle(1000, function(){alert(\'切换完毕\')})})

  

• fadeTo方法: 淡入到指定程度

  $(\'button\').eq(3).click(function () {$(\'div\').fadeTo(1000, 0.2, function(){alert(\'已淡入到指定程度\')})})

  

四. jQuery自定义动画

• anmite()

  方法: 设置自定义动画，可以传四个参数

  $(\'.one\').animate({marginLeft : 500},5000,\'linear\',function(){alert(\'自定义动画执行完毕\')})

  第一个参数: 接收一个对象，可以在对象中修改属性

  第二个参数: 指定动画时长

  第三个参数: 指定动画速度，默认swing: 慢快慢 linear: 匀速运动

  第四个参数: 动画执行完毕之后的回调函数

  对象中可以传多个参数，会同时执行

  $(\'.one\').animate({width : 500,height : 500},1000)

• 如果想分开执行可以按以下写法

  $(\'.one\').animate({width: 500}, 1000).animate({height: 500}, 1000)

$(\'.two\').animate({width : \'+=100\'}, 1000, \'linear\', function () {// alert(\'自定义动画执行完毕\')})

$(\'.one\').animate({// width: \"hide\"width: \"toggle\"}, 1000, \'linear\', function () {// alert(\'自定义动画执行完毕\')})

五. jQuery的stop和delay方法

• delay()方法: 设置延迟时长

  $(\'.one\').animate({width: 500}, 1000).delay(2000).animate({height: 500}, 1000)

  先宽度变，过2秒后高度变
  

• stop()方法的几种情况：

  立即停止当前动画，继续执行后续的动画

  $(\"div\").stop();$(\"div\").stop(false);$(\"div\").stop(false, false);

  

• 立即停止当前和后续所有的动画

  $(\"div\").stop(true);$(\"div\").stop(true, false);

  

• 立即完成当前的，继续执行后续动画

  $(\"div\").stop(false, true);

  

• 立即完成当前的，并且停止后续所有的

  $(\"div\").stop(true, true);

  

六. off和interval

• off: 打开或关闭全局动画。默认是false打开，当设为true时会关闭所有动画

  jQuery.fx.off = true;

• interval: 设置动画的显示帧数。默认是13. 这个值越大动画越卡，越小越流畅越站游览器性能

  jQuery.fx.interval = 100;