WEB前端jQuery—动画

显示隐藏动画

• 显示:jq对象.show([time, easing, func])，参数：
  • time：动画总时间(ms)，三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值
  • easing：动画切换效果
    • 'swing'：默认值，动画执行时先慢，中间快，最后又慢
    • 'linear'：动画执行时速度是匀速的
  • func：在动画完成时执行的函数，每个元素执行一次
• 隐藏: jq对象.hide([time, easing, func])
• 切换：jq对象.toggle([time, easing, func])

滑入滑出动画

• 滑入：jq对象.slideDown([time, easing, func])
  • 参数：详情show()
  • 注意：不传参,默认参数为"normal"
• 滑出：jq对象.slideUp([time, easing, func])
  • 参数：详情show()
  • 注意：不传参,默认参数为"normal"
• 切换：jq对象.slideToggle([time, easing, func])
  • 意义：如果是滑入状态，就执行滑出的动画。反之滑入
  • 注意：不传参,默认参数为"normal"

淡入淡出切换

• 淡入：jq对象.fadeIn([time, easing, func])
• 淡出：jq对象.fadeOut([time, easing, func])
• 切换：jq对象.fadeToggle([time, easing, func])
  • 意义：如果是淡入状态，就执行淡出的动画；反之淡入

自定义动画

• 语法: jq对象.animate(obj[, time, curve, callback])，参数:
  • obj默认对象,里面是样式的属性和值。
  • time默认动画的执行时间
  • curve默认动画曲线，
    • "swing"：缓速，默认
    • "linear"：匀速
  • callback：回调函数，动画结束后执行

停止动画

• 动画队列：在jQuery中，如果绑定了多个动画，它们会被存放到一个队列中。优点是保证所有动画都执行，缺点是需要大量的时间才会执行完成。
• 作用：停止当前的所有动画，立即执行即将要执行的动画，解决"动画拖延"的问题。
• 语法：jq对象.stop([clearQueue,jumpToEnd])，参数：
  • clearQueue:是否清除动画队列,默认false，一般省略
  • jumpToEnd:是否跳转到当前动画的最终效果，默认false，一般省略
• 示例：

  // 手风琴
  $li.mouseenter(function () {
  	$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
  });
  

延迟动画

• 语法：jq对象.delay(time)，参数：
  • time：停留多少毫秒
• 示例：

  // 让div淡入后停留2秒再淡出
  $("div").fadeIn(1000).delay(2000).fadeOut(1000);