六、jQuery效果_easing:要使用的擦除效果的名称(需要插件支持).默认jquery提供"linear" 和 "s

jQuery效果

所有动画要想显示变化效果，都要先在css样式里写display：none

一、显示隐藏动画

• show( [ speed, [easing], [fn] ] ) : 显示隐藏的匹配元素。类似于显示display：none

  speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

  **fn:**在动画完成时执行的函数，每个元素执行一次。

• hide( [ speed, [easing], [fn] ] ) ：隐藏匹配的元素。类似于display：none

• toggle( [speed], [easing], [fn] ) ：绑定两个或多个事件处理器函数，如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

二、展开收起动画

• slideDown( [speed], [easing], [fn] )：通过高度变化（向下增大）来动态地展开显示所有匹配的元素

  speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

  fn在动画完成时执行的函数，每个元素执行一次。

• slideUp( [speed, [easing], [fn] ] )：通过高度变化（向上减小）来动态地收起隐藏所有匹配的元素

• slideToggle( [speed], [easing], [fn] )：通过高度变化来切换所有匹配元素的可见性

  在jQuery中如果要执行动画，建议在执行动画之前先调用stop()方法停止当前正在运行的动画***，然后再执行动画*

三、淡入淡出动画

• fadeIn( [speed], [easing], [fn] )：通过不透明度的变化来实现所有匹配元素的淡入效果

  speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

  fn:在动画完成时执行的函数，每个元素执行一次。

• fadeOut( [speed], [easing], [fn] )：通过不透明度的变化来实现所有匹配元素的淡出效果

• fadeToggle( [speed, [easing], [fn] ] )：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

• fadeTo( [ [speed], opacity, [easing], [fn] ] )把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

链式编程：$(“div”).stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

四、自定义动画

• animate( params, [speed], [easing], [fn] )

params:一组包含作为动画属性和终值的样式属性和及其值的集合；注意所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing缓动”.

fn:在动画完成时执行的函数，每个元素执行一次。

$("div").anminate({
		//同时修改多个动画属性，会同时执行
		marginLeft : 500，
        width ： "hide" ，//隐藏
        background ： "toggle"， //切换
        height ： "+=100"， //累加属性，原来基础上再加100px
},5000,"linear",function(){alert("动画执行完毕")；})
1
2
3
4
5
6
7

• delay( )延迟

  $("div").animate({
  	width : 500
  },1000).delay(2000).animate({
  	height : 500
  },1000);  //链式编程，延迟2s后再执行下一个动画
  1
  2
  3
  4
  5

• stop( [clearQueue], [jumpToEnd] )

  clearQueue:是否立即结束动画。默认为false，则立即完成动画

  jumpToEnd：是否立即完成动画。默认为false，则立即结束动画

   <script>
          $(function () {
              $("button").eq(0).click(function () {
                  $("div").animate({
                      width: "+=200"
                  }, 1000);
                  $("div").animate({
                      height: "+=200"
                  }, 1000);
                  $("div").animate({
                      width: 100
                  }, 1000);
                  $("div").animate({
                      height: 100
                  }, 1000);
              });
              $("button").eq(1).click(function () {
                  $("div").stop();//立即结束当前动画，继续执行后续的动画，与传入参数的stop(false); 和stop(false,false);效果一样
                  $$("div").stop(true);//立即结束当前和后续的所有动画，stop(true,false)
                  $$("div").stop(false, true);//立即完成当前的，立即完成后续的所有动画
                  $$("div").stop(true, true);//立即结束当前的，立即完成后续的所有动画
              })
          });
      </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24