devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

8.自定义动画①淡入淡出切换fadeIn、~Out、~Toggle②滑动slideDown、~Up、~Toggle③显示show隐藏hide切换toggle④通用动画animate（）⑤停stop（）_fadeinup 切换动画

作者：不正经 | 2024-06-02 01:45:07

赞

踩

fadeinup 切换动画

目录

一：淡入淡出切换：不断改变元素的透明度来实现的 参数毫秒

 1.fadeIn():带动画的显示

 2.fadeOut():带动画的显示

 3.fadeToggle():带动画的显示/隐藏

二：滑动（从上到下出现）  参数毫秒

1. slideDown(): 带动画的展开

2. slideUp(): 带动画的收缩

3. slideToggle(): 带动画的切换展开/收缩

三：显示与隐藏（从左上角到右下角出现）如果不传递参数毫秒，默认是没有任何过渡效果的，瞬间出现

1. show(): (不)带动画的显示

2. hide(): (不)带动画的隐藏

3. toggle(): (不)带动画的切换显示/隐藏

四：动画案例：自己增加宽高，自己移动

1. animate({要改变的样式（对象的形式宽高）}，过渡时间不写默认3秒)     : 自定义的动画方法

2. stop(): 停止动画

3.stop().animate()：先停止当前动画，直接进行下一动画

一：淡入淡出切换：不断改变元素的透明度来实现的 参数毫秒

 1.fadeIn():带动画的显示

 2.fadeOut():带动画的显示

 3.fadeToggle():带动画的显示/隐藏

  1. <style>
  2.     .div1 {
  3.         width: 300px;
  4.         height: 300px;
  5.         background-color: pink;
  6.     }
  7. </style>
  8.  
  9. <body>
  10.     <button id="btn1">慢慢淡出</button>
  11.     <button id="btn2">慢慢淡入</button>
  12.     <button id="btn3">淡出/淡入切换</button></button>
  13.     <div class="div1"></div>
  14.  
  15.     <!-- 淡入淡出：不断改变元素的透明度来实现的 参数毫秒
  16.           1.fadeIn():带动画的显示
  17.           2.fadeOut():带动画的显示
  18.           3.fadeToggle():带动画的显示/隐藏
  19.     -->
  20.     <script src="js/jquery-1.10.1.js"></script>
  21.     <script>
  22.         $('#btn1').on('click', function () {
  23.             $('.div1').fadeOut(2000)
  24.         })
  25.         $('#btn2').on('click', function () {
  26.             $('.div1').fadeIn(2000)
  27.         })
  28.         $('#btn3').on('click', function () {
  29.             $('.div1').fadeToggle(2000)
  30.         })
  31.     </script>
  32. </body>

二：滑动（从上到下出现）  参数毫秒

1. slideDown(): 带动画的展开

2. slideUp(): 带动画的收缩

3. slideToggle(): 带动画的切换展开/收缩

  1. <style type="text/css">
  2.     * {
  3.         margin: 0px;
  4.     }
  5.  
  6.     .div1 {
  7.         position: absolute;
  8.         width: 200px;
  9.         height: 200px;
  10.         top: 50px;
  11.         left: 10px;
  12.         background: red;
  13.     }
  14. </style>
  15.  
  16. <body>
  17.     <button id="btn1">慢慢收缩</button>
  18.     <button id="btn2">慢慢展开</button>
  19.     <button id="btn3">收缩/展开切换</button>
  20.  
  21.     <div class="div1">
  22.     </div>
  23.  
  24.     <!--
  25.        滑动动画 参数毫秒
  26.        1. slideDown(): 带动画的展开
  27.        2. slideUp(): 带动画的收缩
  28.        3. slideToggle(): 带动画的切换展开/收缩
  29. -->
  30.     <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  31.     <script type="text/javascript">
  32.         $('#btn1').click(function () {
  33.             $('.div1').slideUp(2000);
  34.         })
  35.         $('#btn2').click(function () {
  36.             $('.div1').slideDown(2000)
  37.         })
  38.         $('#btn3').click(function () {
  39.             $('.div1').slideToggle(2000)
  40.         })
  41.     </script>
  42. </body>

三：显示与隐藏（从左上角到右下角出现）如果不传递参数毫秒，默认是没有任何过渡效果的，瞬间出现

1. show(): (不)带动画的显示

2. hide(): (不)带动画的隐藏

3. toggle(): (不)带动画的切换显示/隐藏

  1. <style type="text/css">
  2.     * {
  3.         margin: 0px;
  4.     }
  5.  
  6.     .div1 {
  7.         position: absolute;
  8.         width: 200px;
  9.         height: 200px;
  10.         top: 50px;
  11.         left: 10px;
  12.         background: red;
  13.         display: none;
  14.     }
  15. </style>
  16.  
  17. <body>
  18.     <button id="btn1">瞬间显示</button>
  19.     <button id="btn2">慢慢显示</button>
  20.     <button id="btn3">慢慢隐藏</button>
  21.     <button id="btn4">显示隐藏切换</button>
  22.  
  23.     <div class="div1">
  24.     </div>
  25.  
  26.     <!--
  27.          显示隐藏， show和hide方法 如果不传递时间  默认是没有任何过渡效果的
  28.          沿对角线过渡
  29.          1. show(): (不)带动画的显示
  30.          2. hide(): (不)带动画的隐藏
  31.          3. toggle(): (不)带动画的切换显示/隐藏
  32.     -->
  33.     <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  34.     <script type="text/javascript">
  35.         $('#btn1').click(function () {
  36.             $('.div1').show();
  37.         })
  38.         $('#btn2').click(function () {
  39.             $('.div1').show(2000);
  40.         })
  41.         $('#btn3').click(function () {
  42.             $('.div1').hide(2000)
  43.         })
  44.         $('#btn4').click(function () {
  45.             $('.div1').toggle(2000)
  46.         })
  47.     </script>
  48. </body>

四：动画案例：自己增加宽高，自己移动

1. animate({要改变的样式（对象的形式宽高）}，过渡时间不写默认3秒)     : 自定义的动画方法

2. stop(): 停止动画

3.stop().animate()：先停止当前动画，直接进行下一动画

  1. <style type="text/css">
  2.     * {
  3.         margin: 0px;
  4.     }
  5.  
  6.     .div1 {
  7.         position: absolute;
  8.         width: 100px;
  9.         height: 100px;
  10.         top: 50px;
  11.         left: 300px;
  12.         background: red;
  13.         color: #fff;
  14.     }
  15. </style>
  16.  
  17. <body>
  18.     <button id="btn1">逐渐扩大</button>
  19.     <button id="btn2">向右移动</button>
  20.     <button id="btn3">向左移动</button>
  21.     <button id="btn4">停止动画</button>
  22.  
  23.     <div class="div1">
  24.         animate(): 自定义动画方法，两个参数 参数1：要改变的样式（对象的形式） 参数2：过渡时间，不写默认3秒
  25.         stop(): 停止动画
  26.     </div>
  27.  
  28.     <!--
  29. jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
  30. 1. animate(): 自定义动画方法，两个参数 参数1：要改变的样式（对象的形式宽高）  参数2：过渡时间，不写默认3秒
  31. 2. stop(): 停止动画
  33. -->
  34.     <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  35.     <script type="text/javascript">
  36.         $(function () {
  37.             //1.先宽度扩大后高度扩大
  38.             $('#btn1').click(function () {
  39.                 $('.div1').animate({
  40.                     'width': '300px'
  41.                 }, 1000).animate({
  42.                     'height': '300px'
  43.                 }, 1000)
  44.             })
  45.             //2.向右移动：基于当前位置向右移动 200px
  46.             // stop()清除上一个动画，直接开始下一个
  47.             $('#btn2').click(function () {
  48.                 $('.div1').stop().animate({
  49.                     'left': '+=200'
  50.                 }, 2000)
  51.             })
  52.  
  53.             //3.向左移动：基于当前位置向右移动 200px
  54.             $('#btn3').click(function () {
  55.                 $('.div1').stop().animate({
  56.                     'left': '-=200'
  57.                 }, 2000)
  58.             })
  59.             //停止动画
  60.             $('#btn4').click(function () {
  61.                 //  第一个参数：是否清空动画队列     
  62.                 //  第二个参数：当前动画是否执行到目的地
  63.                 //  $('.div1').stop(fales,false);//立即停止当前动画  在当前的位置执行下一个动画  不清空动画队列
  64.                 //  $('.div1').stop(false,true);//立即停止当前动画  直接跳到动画结束的状态   不清空动画队列
  65.                 //  $('.div1').stop(true,false);//立即停止当前动画  清空动画队列  直接在当前位置停止动画
  66.                 $('.div1').stop(true, true);//立即停止当前动画 直接跳到动画结束状态  清空动画队列
  67.             })
  68.  
  69.  
  70.         });
  71.  
  72.     </script>
  73. </body>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号