js►JQuery

02-动画

jquery动画

jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能

隐藏/展示动画(参数为空,没有动画效果):本质就是改变元素的width,height,opacity

  1. show(time,func) 展示动画

    • time：元素展开的动画时间，单位毫秒，可以直接数字，也可以固定字符串形式：fast:快=200ms normal：正常=400ms slow:慢=600ms
    • 运动曲线
    • func: 回调函数[可选参数],动画执行完成后执行

  2. hide() 隐藏动画

    用法和show()一致，只是动画效果是逆向的

  3. toggle()

    动画切换，如果当前状态是展示，触发toggle()则隐藏，否则展示

隐藏展示 演示

1
2
3
4
5
6
7
8
<style>
  div {
    width: 400px;
    height: 400px;
    background-color: pink;
    display: none;
  }
</style>
1
2
3
4
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="jquery-1.12.4.js"></script>
<script>
  $('button:first').click(function() {
    $('div').show(1000,'linear',function() {
      console.log('展开动画执行完成');
    });
  });

  $('button').eq(1).click(function() {
    $('div').hide(1000,function(){
      console.log('隐藏动画执行完成');
    });
  });
  $('button').eq(2).click(function() {
    // 如果是显示状态，就会隐藏， 如果是隐藏状态，就会显示
    $('div').toggle(1000,function(){
     console.log("动画切换完成了");
    });
  })
</script>

淡入/淡出动画(没有参数时默认是normal也就是400ms):本质就是改变元素透明度

  1. fadeIn() 
  2. fadeOut()
  3. fadeToggle()
  4. **参数，用法和show()/hide()/toggle()一致可以一并记忆，只是动画效果不同**

上、下卷动画(没有参数时默认是normal也就是400ms):本质就是改变元素的height属性

  1. slideDown()
  2. slideUp()
  3. slideToggle()
  4. 参数，用法和show()/hide()/toggle()一致可以一并记忆，只是动画效果不同

自定义动画 animate()

  1. 参数1：必填，给动画设置样式 **是个对象**
  2. 参数2：指定动画时间，默认是normal
  3. 参数3：指定动画效果 默认是swing ,常用的还有linear等等
  4. 参数4：回调函数，动画完成后执行

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
  }
  div:nth-of-type(2) {
    margin-top: 200px; 
  }
</style>
1
2
3
<button>执行动画</button>
<div></div>
<div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="jquery-1.12.4.js"></script>
<script>
  $('button').eq(0).click(function () {
   // 默认swing
    $('div').eq(0).animate({ left: 1000 }, 5000, function () {
          console.log('动画执行结束了');
      });
   //声明 swing
    $('div').eq(0).animate({ left: 1000 }, 5000, 'swing', function (){
          console.log('动画执行结束了');
      });
    // linear 线性运动
   $('div').eq(1).animate({ left: 1000 }, 5000, 'linear', function (){
          console.log('动画执行结束了');
      });
  });
</script>

jquery动画队列

  1. jquery为了保证动画不会丢失，使用队列的形式，依次执行动画
  2. 所以只要你触发动画事件，就相当于向队列添加一个动画任务,直到执行完成

演示

1
2
3
4
5
6
7
8
<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
  }
</style>
1
<div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="jquery-1.12.4.js"></script>
<script>
  // 类似回调地狱执行完在执行下一个,保证不会丢失
  // $('div').animate({left: 400}, function() {
  //   $('div').animate({width: 300}, function() {
  //     $('div').animate({height: 300}, function(){
  //       $('div').animate({borderRadius: 150})
  //     })
  //   })
  // });

  // 采用链式比较直观
   $('div').animate({left: 400}).animate({width: 300}).animate({height: 300}).animate({borderRadius: 150})  
  // 1. 跑到left:400的地方
  // 2. 宽度变大为300
  // 3. 高度变为300
  // 4. 变圆
  // 四个步骤依次执行
</script>

stop()停止动画

  1. 参数一：是否清除被选元素所有加入队列的动画？true/false，默认false
  2. 参数二: 是否直接跳到最后的执行结果？true/false,默认false
  3. 如果参数stop(true,true) 第一参数是true动画队列会被清除，所以即使第二参数也是true,但因为动画队列被清除后没有了后续动画也就只会执行到当前动画的最终效果

演示

1
2
3
4
5
6
7
8
9
10
<style>
    .animator {
        height: 150px;
        width: 150px;
        background-color: gainsboro;
        float: left;
        margin-left: 20px;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="animator"></div>
 <button>执行动画队列</button>
 <div style="clear:both">
     <p>
         stop(param1,param2) 两个参数都是布尔类型
     </p>
     <p>
         param1:控制是否清空队列，true：清空，false：不清空
     </p>
     <p>
         param2:控制是否跳转到当前正在执行的动画的最终效果，true:跳转，false：不跳转
     </p>
     <hr>
     <div>
         <p>默认情况：stop() 参数false 停止当前动画，不清空队列，不跳转当前动画的最终效果</p>
         <button>stop()</button>
         <p>情况二: stop(true) 第一个参数true,第二参数false 清空队列，不跳转当前动画的最终效果</p>
         <button>stop(true)</button>
         <p>情况三:stop(true,true) 第一个参数true,第二个参数true 清空队列，跳转当前动画最终效果在清空动画队列</p>
         <button>stop(true,true)</button>
         <p>情况三:stop(false,true) 第一个参数false,第二个参数true 不清空队列，跳转当前动画最终效果在清空动画队列</p>
         <button>stop(false,true)</button>
     </div>
 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script src="./jquery-1.12.4.js"></script>
 <script src="./jquery.color.js"></script>
 <script>
     var div = $(".animator")
     var colors = ["red", "black", "blue", "yellow", "olive", "fuchsia", "teal", "aqua"]
     var count = 0;
     div.mouseenter(function () {
         count++;
         if (count > colors.length) {
             return
         }
         console.log(count);

     })
     $("button").eq(0).click(function () {
         for (var i = 0; i < count; i++) {
             div.animate({ "backgroundColor": colors[i] }, 5000, function () {
                 console.log("执行完~");
             })
         }
     })

     // 默认情况：stop() 不清空动画队列，不跳转当前动画最终效果

     $("button").eq(1).click(function () {
         div.stop().animate({ "width": 300, "height": 300 })
     })
     $("button").eq(2).click(function () {
         div.stop(true).animate({ "width": 300, "height": 300 })
     })
     $("button").eq(3).click(function () {
         div.stop(true, true).animate({ "width": 300, "height": 300 })
     })
     $("button").eq(4).click(function () {
         div.stop(false, true).animate({ "width": 300, "height": 300 })
     })
 </script>