讓你更快掌握JQ的動畫

淡入淡出

淡入淡出: 不斷改變元素的透明度(opacity)來實現的

  1. fadeIn(): 帶動畫的顯示
  2. fadeOut(): 帶動畫隱藏
  3. fadeToggle(): 帶動畫切換顯示/隱藏

fadeIn

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing::(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

 var $div1 = $('.div1')
 $('#btn1').click(function () {
   $div1.fadeOut(1000, function () 
       alert('動畫完成了!!!')
   })
 })

fadeOut

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)

  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"

  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

    var $div1 = $('.div1')
    $('#btn2').click(function () {
        $div1.fadeIn()
    })

fadeToggle

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)

  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"

  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

    var $div1 = $('.div1')
    $('#btn3').click(function () {
        $div1.fadeToggle()
    })

滑動

滑動動畫: 不斷改變元素的高度實現

  1. slideDown(): 帶動畫的展開
  2. slideUp(): 帶動畫的收縮
  3. slideToggle(): 帶動畫的切換展開/收縮

slideDown

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

  var $div1 = $('.div1')

  // 1. 點擊btn1, 向上滑動
  $('#btn1').click(function () {
    $div1.slideUp(2000)
  })

slideUp

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

  var $div1 = $('.div1')

  // 2. 點擊btn2, 向下滑動
  $('#btn2').click(function () {
    $div1.slideDown()
  })

slideToggle

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

  var $div1 = $('.div1')

  $('#btn3').click(function () {
    $div1.slideToggle()
  })

顯示與隱藏

顯示隱藏,默認沒有動畫, 動畫(opacity/height/width)

  1. show(): (不)帶動畫的顯示
  2. hide(): (不)帶動畫的隱藏
  3. toggle(): (不)帶動畫的切換顯示/隱藏

show

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

立即顯示緩慢顯示

  var $div1 = $('.div1')
  //1. 點擊btn1, 立即顯示
  $('#btn1').click(function () {
    $div1.show()
  })

  //2. 點擊btn2, 慢慢顯示
  $('#btn2').click(function () {
    $div1.show(1000)
  })

hide

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

  var $div1 = $('.div1')
  $('#btn3').click(function () {
    $div1.hide(1000)
  })

toggle

參數

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)
  • easing:(Optional) 用來指定切換效果,默認是"swing",可用參數"linear"
  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

立即顯示緩慢顯示

  var $div1 = $('.div1')
  $('#btn4').click(function () {
    $div1.toggle(1000)
  })

自定義動畫

jQuery動畫本質 : 在指定時間內不斷改變元素樣式值來實現的

  1. animate(): 自定義動畫效果的動畫
  2. stop(): 停止動畫

參數

  • params:一組包含作爲動畫屬性和終值的樣式屬性和及其值的集合

  • speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如:1000)

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

  • fn:在動畫完成時執行的函數,每個元素執行一次。

示例代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自定義動畫</title>
  <style type="text/css">
    * {
      margin: 0px;
    }

    .div1 {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 300px;
      background: red;
    }
  </style>
</head>
<body>
<button id="btn1">逐漸擴大</button>
<button id="btn2">移動到指定位置</button>
<button id="btn3">移動指定距離</button>
<button id="btn4">停止動畫</button>

<div class="div1">
  沉默不是代表我的錯,我也沒有錯
</div>


<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  var $div1 = $('.div1')

  /*
   1. 逐漸擴大
     寬先擴爲200px, 高後擴爲200px
   */
  $('#btn1').click(function () {

    $div1
      .animate({
        width: 200
      }, 1000)
      .animate({
        height: 200
      }, 1000)

  })

  /*
   2. 移動到指定位置
     移動到(100, 20)處
   */
  $('#btn2').click(function () {

    // 移動到(100, 20)處
    $div1.animate({ // 向左上移動
      left: 100,  // 300
      top: 20  // 50
    }, 1000)
  })

  /*
   3.移動指定的距離
      移動距離爲(-100, -20)
   */
  $('#btn3').click(function () {

    // 移動距離爲(-100, -20)
    $div1.animate({
      left: '-=100',
      top: '-=20'
    }, 3000)
  })

  $('#btn4').click(function () {
    $div1.stop()
  })

</script>
</body>
</html>

案例練習

動畫實現動態導航欄

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>導航動態顯示效果</title>
  <style rel="stylesheet">
    * {
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      word-break: break-all;
    }

    body {
      background: #FFF;
      color: #333;
      font: 12px/1.6em Helvetica, Arial, sans-serif;
    }

    a {
      color: #0287CA;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    ul, li {
      list-style: none;
    }

    img {
      border: none;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }

    html {
      overflow: -moz-scrollbars-vertical; /* 在Firefox下始終顯示滾動條*/
    }

    #navigation {
      width: 784px;
      padding: 8px;
      margin: 8px auto;
      background: #3B5998;
      height: 18px;
    }

    #navigation ul li {
      float: left;
      margin-right: 14px;
      position: relative;
      z-index: 100;
    }

    #navigation ul li a {
      display: block;
      padding: 0 8px;
      background: #EEEEEE;
      font-weight: 700;
    }

    #navigation ul li a:hover {
      background: none;
      color: #fff;
    }

    #navigation ul li ul {
      background-color: #88C366;
      position: absolute;
      width: 80px;
      overflow: hidden;
      display: none;
    }

    #navigation ul li ul li {
      border-bottom: 1px solid #BBB;
      text-align: left;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">首 頁</a></li>
    <li><a href="#">襯 衫</a>
      <ul>
        <li><a href="#">短袖襯衫</a></li>
        <li><a href="#">長袖襯衫</a></li>
        <li><a href="#">無袖襯衫</a></li>
      </ul>
    </li>
    <li><a href="#">衛 衣</a>
      <ul>
        <li><a href="#">開襟衛衣</a></li>
        <li><a href="#">套頭衛衣</a></li>
      </ul>
    </li>
    <li>
      <a href="#">褲 子</a>
      <ul>
        <li><a href="#">休閒褲</a></li>
        <li><a href="#">卡其褲</a></li>
        <li><a href="#">牛仔褲</a></li>
        <li><a href="#">短褲</a></li>
      </ul>
    </li>
    <li><a href="#">聯繫我們</a></li>
  </ul>
</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#navigation>ul>li:has(ul)').hover(function () {
    //動畫展開
    $(this).children('ul').stop(true).slideDown()
  }, function () {
    // 動畫收縮
    $(this).children('ul').stop(true).slideUp()
  })
</script>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章