小白自学第十一天 —— jQuery动画的使用

动画

预定义动画

显示与隐藏

show() 方法 和 hide() 方法

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);
//speed - 表示预定速度的字符串或表示动画时长的毫秒数值
//easing - 规定切换效果
//fn - 在动画完成时执行的函数，每个元素执行一次。

滑动式动

slideUp() 和 slideDown()

没有无动画版本(底层代码预定义动画执行的时长)

作用 - 改变指定元素的高度

淡入淡出效果 - 改变元素的透明度

fadeOut() 和 fadeIn()

 $('#box').fadeOut(3000);
 $('#box').fadeIn(3000);

动画切换效果（有局限性，只有三种）

toggle([speed][, easing][, fn]) 方法:如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。

slideToggle([speed][, easing][, fn]) 方法:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

fadeToggle([speed][, easing][, fn] 方法:通过不透明度的变化来开关所有匹配元素的淡人和淡出效果，并在动画完成后可选地触发一个回调函数。

自定义动画

animate() 方法

$element.animate(prperties,duration,easing,complete)

• properties：css样式属性
• duration：动画执行时长,以毫秒为单位
• easing：一个字符串， 表示过渡使用哪种缓动函数。
• complete：执行动画结束后的回调函数

并发与排队效果

• 并发：多个动画同时执行

  $('#box').animate({
      left: 400,
      top: 400
  }, {
      duration: 300,
      queue: true   //false为默认值
  });
  

• 排队：多个动画按照先后顺序执行

  $('#box').animate({
      left: 400,
  }, {
      duration: 3000
  }).animate({
      top: 400
  }, {
      duration: 3000,
      queue: true   //用于控制当前效果为并发还是排队，false-并发；true-排队。
  });
  

停止动画效果

stop() 方法：停止所有运行指定元素的动画

$element.animate([clearQueue][,gotoEnd])

stop() 方法没有接收参数时会立即停止执行动画

• stop(queue) 方法第一个参数

  $('#js').click(function () {
   $('#box').stop(true);
  

  • true - 停止当前动画，并清空队列
  • false - 停止当前动画，但队列中的动画继续执行

• stop(queue)方法第二个参数

  $('#js').click(function () {
   $('#box').stop(true,false);
  

  • true - 停止当前动画，并将指定元素设置为动画执行结束
  • false - 不做处理

延迟执行动画

delay()方法

 $('#box').animate({
	 left: 800
 }, 6000).delay(1000).animate({
 	top: 600
 }, 3000);

animate() 方法，不支持的样式属性：

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• Color
• outlineColor