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

jquery语法学习12（淡入淡出动画 自定义动画 停止动画）_jquery fadetoggle 停止

作者：我家小花儿 | 2024-06-02 01:40:30

赞

踩

jquery fadetoggle 停止

1）淡入淡出动画

  1.fadeIn  淡显动画

  2.fadeOut   淡隐动画

  3.fadeToggle  动画切换

  4.fadeTo  淡显到

下面是代码 这里注意一下 动画里能做动画效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     	<style type='text/css'>
  9.         *{
  10.             padding: 0px;
  11.             margin: 0px;
  12.  
  13.         }
  14.         div{
  15.             width: 500px;
  16.             height: 500px;
  17.             background: sandybrown;
  18.             display: none;
  19.         }
  20.        </style>
  21.         <script src='../JS/jquery-1.4.1.js'></script>
  22.         <script>
  23.         $(function()
  24.         {/* 淡入淡出动画  */
  25.             var $div =  $("div");
  26.           $("button").eq(0).click(function(){
  27.  
  28.             $div.fadeIn(1000,function(){
  29.                 alert("这是淡入")
  30.             });
  31.           })
  32.           $("button").eq(1).click(function(){
  33.             $div.fadeOut(1000,function(){
  34.                 alert("这是淡出")
  35.             });
  36.             })
  37.             $("button").eq(2).click(function(){
  38.                 $div.fadeToggle(1000,function(){
  39.                 alert("这是淡入淡出切换")
  40.             });
  41.             })
  42.             $("button").eq(3).click(function(){
  43.                 $div.fadeTo(1000,0.5,function(){
  44.                 alert("这是淡入到");
  45.             });
  46.             })
  47.         });
  48.         </script>
  49. </head>
  50. <body>
  51.     <button>淡入</button>
  52.     <button>淡出</button>
  53.     <button>切换</button>
  54.     <button>淡入到</button>
  55.     <div></div>
  56. </body>
  57. </html>

解释一下

position:fixed;和 position:absolute; 给我感觉都是绝对定位 fixed是网页 absolute是根据父标签

先讲一下动画链  这个很缩短代码量  一个一个的执行代码

$(".nav").slideDown(1000).fadeOut(1000).fadeIn(1000);

2）自定义动画

 1)自定义动画 四个参数的意思

   1 操作对象的数据集

   2 动画时间

   3 缓动方式 linear（先快后慢）和swing（匀速）

   4 动画后触发事件

  2)动画属性累加 属性可以多个 动画数值累加 使用+=

  3)属性根据关键字 有多少个关键 咱不好说 知道的可以留言

  4)delay延迟(延迟后一个动画执行时间)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.     *{
  10.         padding: 0px;
  11.         margin: 0px;}
  12.     .blueClass{
  13.         width: 100px;
  14.         height: 100px;
  15.         background-color:blue;
  16.   /*       overflow: hidden;  超出不显示*/
  17.     }
  18.     .redClass{
  19.         width: 100px;
  20.         height: 100px;
  21.         background-color:red;
  22.         
  23.     }
  24.     </style>
  25.     	<script src='../JS/jquery-1.4.1.js'></script>
  26.         <script>
  27.         $(function()
  28.         {
  29.             /* 自定义动画 四个参数的意思 
  30.             1) 操作对象的数据集
  31.             2） 动画时间
  32.             3） 缓动方式 linear（先快后慢）和swing（匀速）
  33.             4） 动画后触发事件*/
  34.        /*   $("button").eq(0).click(function()
  35.          {
  36.              $(".blueClass").animate({
  37.                 marginLeft: 500
  38.                  
  39.              },5000,"linear",function()
  40.              {
  41.                  alert("我是自定义动画");
  42.              })
  43.              $(".redClass").animate({
  44.                 marginLeft: 500
  45.                  
  46.              },5000,"swing",function()
  47.              {
  48.                 
  49.              })
  50.           
  51.          })
  52.  */
  53.          /* 动画属性累加
  54.          属性可以多个
  55.          动画数值累加 使用+=
  56.          */
  57.          $("button").eq(1).click(function()
  58.          {
  59.             $(".blueClass").animate({
  60.                 width:"+=100",
  61.                 height:220
  62.              },1000,"linear",function()
  63.              {
  64.                 //  alert("我是自定义动画");
  65.              })
  66.         })   
  67. /* 属性根据关键字  有多少个关键 咱不好说 知道的可以留言*/
  68.         $("button").eq(2).click(function()
  69.          {
  70.             $(".blueClass").animate({
  71.                 // width:"hide" //使宽度隐藏。
  72.                 width:"toggle"  //如果有宽度就隐藏，没宽度就显示
  73.              },1000,"linear",function()
  74.              {
  75.                 //  alert("我是自定义动画");
  76.              })
  77.         }) 
  78.  
  79.         /*  自定义链式动画 和delay延迟(延迟后一个动画执行时间)*/
  80.         $("button").eq(0).click(function()
  81.          {
  82.             /* 如果要先后执行 多个动画 */
  83.  
  84.                 $(".blueClass").animate({
  85.                       width:"+=200" 
  86.                 },1000).delay(3000).animate({
  87.                        height:220   
  88.                 },1000)
  89.  
  90.         }) 
  91.  
  92.      /*  动画stop 参数理解
  93.          // 立即停止当前动画 并执行后续动画
  94.          $("标签元素").stop（）
  95.          $("标签元素").stop（false）
  96.          $("标签元素").stop（false,false）
  97.  
  98.          //立即停止当前动画和后续动画
  99.         $("标签元素").stop（true）
  100.         $("标签元素").stop（True,false）
  101.  
  102.         // 立即完成当前动画 并执行后续动画
  103.             $("标签元素").stop（false,True）
  104.            // 立即完成当前动画 并停止后续动画
  105.             $("标签元素").stop（True,True）
  106.      */
  107.      /*  jQuery.fx.off = true; 禁用动画
  108.      jQuery.fx.interval = 100; 动画帧数 越小效果越好 越吃浏览器性能
  109.      */
  110. /*  */
  111.  
  112.             
  113.         });
  114.         </script>
  115. </head>
  116. <body>
  117.     <button> 操作属性</button>
  118.     <button> 累加属性</button>
  119.      <button>关键字</button>
  120.      <div class="blueClass"></div>
  121.      <div class="redClass"></div>
  122.     
  123. </body>
  124. </html>

3）stop和动画禁用,帧

      1动画stop 参数理解
        立即停止当前动画 并执行后续动画
         $("标签元素").stop（）
         $("标签元素").stop（false）
         $("标签元素").stop（false,false）

         立即停止当前动画和后续动画
        $("标签元素").stop（true）
        $("标签元素").stop（True,false）

        立即完成当前动画 并执行后续动画
         $("标签元素").stop（false,True）
         立即完成当前动画 并停止后续动画
         $("标签元素").stop（True,True）
     2动画的禁用和动画的帧数
         jQuery.fx.off = true; 禁用动画
         jQuery.fx.interval = 100; 动画帧数 越小效果越好 越吃浏览器性能
 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/660302
推荐阅读
相关标签

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

  

闽ICP备14008679号