jQuery动画

2015-07-20

jQuery 动画

1 显示与隐藏
显示(show)与隐藏(hide)是一组动画：

  show方法详解：
  show([speed], [callback]);
  speed(可选)：动画的执行时间
1 如果不传，就没有动画效果。
2 毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3 固定字符串，slow(200)、normal(400)、fast(600) ，如果传其他字符串，则默认为normal。
  callback(可选):执行完动画后执行的回调函数
4 hide 方法详解
   与show方法的用法完全一致。
   show/hide：修改的是元素的width、height、opacity。

2滑入与滑出

  滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似
  slideUp/slideDown,使用方法与show/hide基本一致

 slideUp(speed, callback);
 speed(可选)：动画的执行时间
1 如果不传，默认为normal，注意区分show/hide。
2 毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
   3 固定字符串，slow(200)、normal(400)、fast(600)
 callback(可选):执行完动画后执行的回调函数

3 滑入与滑出切换

$(selector).slideToggle(speed,callback);
如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

slideUp/slideDown：修改的是元素的height

4 渐入渐出

  fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。
  fadeIn(speed, callback);
  speed(可选)：动画的执行时间
1 如果不传，默认是normal。
2 毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
   3 固定字符串，slow(200)、normal(400)、fast(600)
    callback(可选):执行完动画后执行的回调函数
  淡入淡出切换
  fadeToggle(speed, callback);
  如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

  淡入淡出到某个值
  淡入与淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

  fadeTo(speed, value, [callback])//可以设置具体的透明度
  speed（必须）
  value  0-1之间的数值(比如0.4)，表示淡到某一个值。
  callback(可选) 回调函数

  注意：fade系列方法：修改的是元素的opacity

动画小结

1.    jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2.    动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
3.    淡入淡出到某个值：fadeTo方法。
4.    show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5.    show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

自定义动画

$(selector).animate({params},[speed],[callback]);
 {params}：要执行动画的CSS属性，带数字（必选）
 speed：执行动画时长（可选）
 callback：动画执行完后立即执行的回调函数（可选）

easing 参数

控制动画在不同元素的速度，默认为“swing”
“swing”：在开头和结尾移动慢，在中间移动速度快
“linear”：匀速移动

动画队列问题

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：地铁进站）

停止动画 stop方法

stop(clearQueue, jumpToEnd);
第一个参数：是否清除队列
第二个参数：是否跳转到最终效果
最常用的停止动画：stop();