动画DOM及其css操作

原理：

我们只需要以固定的时间间隔（0.1秒），每次DOM元素的css样式修改一点（例如:高度，宽度增加10%），看起来就像动画。

自定义动画

  1. asnimate() 可以实现任意动画效果，需要传递的参数是DOM元素最终的css状态和时间。

    1. var div = $("#test-animate");
    2. div.animate({
    3. opcaity:0.25,
    4. width:'256px',
    5. height:'256px
    6. },3000);
    7. 第一个参数：{}属性变化的对象
    8. 第二个参数：动画执行的事件毫秒数

    image.png

  2. delay() 方法可以实现动画暂停

    1. var swiper = function(){
    2.      $('div').stop()
    3.      .animate({'width':'0%'},1000)
    4.      .delay(3000)
    5.      .animate({'width':'100%'},1000);
    6.  }

    image.png

动画函数 — 类型1,2

  1. show() / hide() 直接无参形式调用show（） 和 hide （） 会显示和隐藏DOM元素，但是只要传递一个时间参数进去，就变成动画

image.png

  1. var div = $('#test-show-hide);
  2. div.hide(3000);//在3秒钟内逐渐消失
  1. toggle() 根据当前状态决定是show() 和hide()
  2. fadeIn() 和 fadeOut() 动画的淡入淡出，也就是通过不断设置DONM元素的opacity属性实现的。

image.png

  1. fadeToggle() 根据元素是否可见决定下一步动作

image.png

总结

  1. show和hide会控制宽高和透明度
  2. fade不控制宽高，只会控制透明度

动画函数 — 类型3

  1. slideup slideDown 在垂直方向逐渐的展开或者收缩
  2. slideToggle() 根据元素是否可见决定下一步动作
  3. 总结：只控制高度以及透明度，但是不控制宽度。