JQuery的基本动画和自定义动画

最新推荐文章于 2020-06-18 12:06:09 发布

灯光下的投影

最新推荐文章于 2020-06-18 12:06:09 发布

阅读量250

点赞数

分类专栏： JQuery 文章标签： JQuery的基本动画和自定义动画

本文链接：https://blog.csdn.net/liuyuhua666/article/details/89787616

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了JQuery的基本动画，包括show-hide-toggle、fadeIn-fadeOut-fadeToggle和slideDown-slideUp-slideToggle，并探讨了自定义动画及jQuery的动画队列。同时，提到了stop方法在控制动画过程中的作用，以及一个具体的旋转木马案例。

摘要由CSDN通过智能技术生成

基本动画：

1、show-hide-toggle

<style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>切换</button>
  <div></div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $('button:first').click(function() {
      // 作用: 让一个元素显示
      // 修改了元素的width 和 height 和opacity 进行动画
      // 参数1：
      //    1. 如果没有参数，没有动画效果
      //    2. 参数可以指定为一个时间， 毫秒值， 动画的时间
      //    3. 参数还可以是固定的字符串， fast:快=200ms normal：正常=400ms slow:慢=600ms
      // 参数2：
      //    回调函数， 表示当动画执行完成后，这个函数 就会调用
      $('div').show(1000, function() {
        console.log('动画执行完成了');
      });
    });

    $('button').eq(1).click(function() {
      $('div').hide(1000);
    });

    $('button').eq(2).click(function() {
      // 如果是显示状态，就会隐藏， 如果是隐藏装填，就会显示
      $('div').toggle(1000);
    })


    /* 
      show:显示
      hide:隐藏
      toggle：切换
    */
  </script>
</body>

2、fadeIn-fadeout-fadeToggle：

<style>
    div {
      width: 400px;
      height: 400px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>切换</button>
  <div></div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $('button').eq(0).click(function() {
      // fade系列：用来让一个元素淡入和淡出的效果


      // 作用：淡入  慢慢的显示出来  修改是透明度
      // 参数1： 如果没有，默认是normal
      // $('div').fadeIn(1000);
      $('div').fadeIn(1000, function() {
        console.log('动画结束了');
      })
    });

    $('button').eq(1).click(function() {
      $('div').fadeOut(1000);
    });

    //  转场动画
    $('button').eq(2).click(function() {
      $('div').fadeToggle();
    })


  </script>
</body>

3、slideDown-slideUp-slideToggle：

<style>
    div {
      width: 400px;
      height: 400px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <button>显示</button>
  <button>隐藏</button>
  <button>切换</button>
  <div></div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $('button').eq(0).click(function() {
      // $('div').slideDown();
      $('div').slideDown(1000);
    });

    $('button').eq(1).click(function() {
      $('div').slideUp();
    });

    //  转场动画
    $('button').eq(2).click(function() {
      $('div').slideToggle();
    });


  </script>
</body>

自定义动画：

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0;
    }

    div:nth-of-type(2) {
      margin-top: 200px; 
    }
  </style>
</head>
<body>
  <button>显示</button>
  <div></div>
  <div></div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $('button').eq(0).click(function() {
      // jquery中提供了一个方法 animate用来执行自定义的动画

      /* 
        功能： 给元素执行自定义动画
        参数1： 必填
          指定需要执行动画的样式， 是一个对象
        参数2   指定动画的时间 默认是normal
        参数3   指定动画效果   默认：swing(秋千，摇摆) 先慢后快再慢  linear
        参数4： 函数， 动画结束后就会执行
      */
      // $('div').animate({ width: '400px', height: 400, borderRadius: 200} )

      $('div').eq(0).animate({left: 1000}, 5000);
      $('div').eq(1).animate({left: 1000}, 5000, 'linear', function() {
        console.log('动画执行结束了');
      });
    });
  </script>
</body>

jquery的动画队列：

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
</head>
<body>
  <div></div>
  <script src="jquery-1.12.4.js"></script>
  <script>
    // jquery为了保证动画不丢失， 把所有要执行的动画都保存到一个动画队列中，动画一个一个执行。

    // 好处
    // 1. 跑到left:400的地方
    // 2. 宽度变大为300
    // 3. 高度变为300
    // 4. 变圆

    // 回调地狱
    // $('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})  
  </script>
</body>

stop方法与停止动画：

<style>
    div {
      width: 400px;
      height: 400px;
      display: none;
      background-color: pink;
    }
  </style>
</head>
<body>
  <button>开始</button>
  <button>停止</button>
  <div></div>
  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function(){
      
      $('button').eq(0).click(function() {
        $('div').stop(true).slideDown(2000);
      })


      $('button').eq(1).click(function() {
        // 停止当前这个执行的这个动画

        // 参数1： 是否清除动画队列 clearQueue false
        // 参数2： 是否跳转到当前动画最终效果 false  true
        $('div').stop(false, false);
      })
    });
  </script>
</body>

案例：

旋转木马：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css.css"/>
  <style>

    .slide li {
      transition: all .4s;
    }
    .slide .slide1 {
      width: 400px;
      top: 20px;
      left: 50px;
      opacity: 0.2;
      z-index: 2;
    }

    .slide .slide2 {
      width: 600px;
      top: 70px;
      left: 0;
      opacity: 0.8;
      z-index: 3;
    }

    .slide .slide3 {
      width: 800px;
      top: 100px;
      left: 200px;
      opacity: 1;
      z-index: 4;
    }

    .slide .slide4 {
      width: 600px;
      top: 70px;
      left: 600px;
      opacity: 0.8;
      z-index: 3;
    }

    .slide .slide5 {
      width: 400px;
      top: 20px;
      left: 750px;
      opacity: .2;
      z-index: 2;
    }
  </style>
</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function(){
    var arr = ['slide1', 'slide2', 'slide3', 'slide4', 'slide5'];
    var $li = $("#wrap li");

    var flag = true;
    for(var i = 0; i < $li.length; i++) {
      $li.eq(i).addClass(arr[i]);
    }
    
    $('#arrRight').click(function() {
      if (flag) {
        flag = false;
        arr.unshift(arr.pop());
        for(var i = 0; i < $li.length; i++) {
          // removeClass():删除所有的类
          $li.eq(i).removeClass().addClass(arr[i]);
        }
      }
      
    });

    $('#arrLeft').click(function() {
      arr.push(arr.shift());
      for(var i = 0; i < $li.length; i++) {
        // removeClass():删除所有的类
        $li.eq(i).removeClass().addClass(arr[i]);
      }
    });

    // 等li的过渡结束，把flag 改成true
    $li[0].addEventListener('transitionend', function() {
      flag = true;
    })
  });

  
  
</script>

</body>
</html>