0
0

你真的拿捏 jQuery 四大动画效果了吗？【入门篇超详细 零基础适用】

在艰难的原生 JS 路上我们是否做过各种各样的动画效果呢，例如轮播图的动画函数，下拉菜单，但是其实之前的显示与隐藏等小操作都属于动画效果，在 jQuery 领域我们可以将这些显示隐藏放慢100倍 1000倍来让你看清楚其动画效果，这些就用到了显示与隐藏的 隐藏参数，下面大家看一下 jQuery 为我们写好了哪些动画函数呢？

** 在开始前先给各位来一个温馨注意事项：" 动画函数只要触发就一定会执行，这句话在第四板块会提及到，大家多注意 "**

* jQuery 已封装好的动画函数分类*：

  • *** 显示隐藏效果***
  • 滑动效果（事件切换，动画排队现象）
  • 淡入淡出效果
  • 自定义动画

** " 此篇文章就带大家了解这些方法，走进更为简便的动画世界 ！！" **

一：显示与隐藏

显示与隐藏在前期 jQuery 的文章里我们已经或多或少使用过了，那就是*** show()，hide()***，但是我们只是调用了一下这两个封装好的方法罢了。并没有给其内部设置参数，其实这两个方法是有隐藏参数的，当然 可以带参数可以不带参数。

    • show (** speed，easing，fn ****) **** ：显示***
  • *** hide (speed，easing，fn** ******) ****** **** ：隐藏***
  • *** toggle (speed，easing，fn ) ***：显示隐藏切换

*参数含义： *

参数speedeasingfn含义速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写回调函数，在动画执行完后调用动画函数内的内容

1.1 显示函数 show

show ( speed，easing，fn )，可以带参数可以不带参数，可以让元素显示，下面代码的意义为，显示的过程为5000毫秒(5秒) ，显示过后会调用回调函数，并且过程以 swing 的方式过渡

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 146, 146);
            display: none;
        } 
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
  <div></div>
  <script>
      $('div').show(5000,'swing',function(){
          alert('show 执行完啦')
      })
  </script>
</body>

显示效果：

1.2 隐藏函数 hide

hide ( speed，easing，fn )，可以带参数可以不带参数，可以将显示的元素隐藏，以下代码含义为，隐藏的过程为5000毫秒(5秒) ，隐藏过后会调用回调函数，并且过程以 swing 的方式过渡

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: rgb(255, 146, 146);
        } 
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
  <div></div>
  <script>
      $('div').hide(5000,'swing',function(){
          alert('hide 执行完啦')
      })
  </script>
</body>

隐藏效果：

1.3 显示隐藏切换函数 toggle

toggle ( speed，easing，fn ) ，可以带参数可以不带参数，可以切换元素，其实是判断该元素是否显示，如果此元素是显示的，则给它隐藏，如果此元素是隐藏的，则给它显示。

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 146, 146);
        } 
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
  <button>切换</button>  
  <div></div>
  <script>
     $('button').click(function(){
         $('div').toggle(2000,'swing',function(){
             alert('我切换啦')
         })
     })
  </script>
</body>

显示切换效果：

隐藏切换效果：

二：滑动效果

上拉下拉的最终目的其实也是元素的显示与隐藏，还记得我们的下拉菜案案例吗？当时我们只用了移动光标使下拉盒子直接显示或隐藏，没有动态效果非常的丑陋，我们学习了这一节滑动效果，就可以使你的下拉菜单真正意义上的下拉，实现更完美的动画效果，下面介绍一下几种常用的：

  • slideDown (* speed，easing，fn ****) *：下拉
  • slideUp (* speed，easing，fn ****) **** ：上拉***
  • slideToggle (* speed，easing，fn ****) *：上拉下拉切换

参数含义：

参数speedeasingfn含义速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写回调函数，在动画执行完后调用动画函数内的内容

2.1 下拉函数 slideDown

slideDown ( speed，easing，fn )，可以带参数可以不带参数，可以让元素以下拉的形式慢慢显示出来

   <style>
          div{
              width: 300px;
              height: 400px;
              background-color: rgb(255, 181, 181);
              display: none;
          }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
    <button>下拉</button>
    <div></div>
  <script>
    $('button').click(function(){
        $('div').slideDown(2000,'swing',function(){
            alert('我下拉了')
        })
    })
  </script>
</body>

下拉效果：

2.2 上拉函数 slideUp

slideUp ( speed，easing，fn ) ，可以带参数也可以不带，可以让元素以上拉的形式慢慢隐藏起来

    <style>
          div{
              width: 300px;
              height: 400px;
              background-color: rgb(255, 181, 181);
          }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
    <button>上拉</button>
    <div></div>
  <script>
    $('button').click(function(){
        $('div').slideUp(2000,'swing',function(){
            alert('我上拉了')
        })
    })
  </script>
</body>

上拉效果：

2.3 上拉下拉切换函数 slideToggle

slideToggle ( speed，easing，fn )* ***，可以带参数可以不带参数，可以切换元素上拉下拉，其实是判断该元素是否显示，如果此元素是显示的，则给它上拉隐藏，如果此元素是隐藏的，则给它下拉显示。

    <style>
          div{
              width: 300px;
              height: 400px;
              background-color: rgb(255, 181, 181);
          }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
    <button>切换</button>
    <div></div>
  <script>
    $('button').click(function(){
        $('div').slideToggle(2000,'swing',function(){
            alert('我切换了')
        })
    })
  </script>
</body>

下拉显示效果：

** 上拉隐藏效果： **

三：事件切换

有了下拉上拉的基础，我们就可以写一个下拉菜单真正意义上下拉的效果啦，为方便起见我们只写了一个下拉菜单，并且 css 在文章结构中就不展示啦，需要的话在文章末尾自己取哦，所谓事件切换，是 jQuery 为开发效率及减少代码冗余问题得来的一个函数，多用于有去有回的事件，例如鼠标移上移走，点击打开和点击关闭这类双重事件，下面说明一下其用法：

$( 'ele' ) . hover ( function() {触发函数} , function() {移除函数} )

我们先看看不用切换函数的话应该怎么写：

3.1 下拉菜单普通写法：

<body>
   <div class="box">
       <div class="banner">目&nbsp;&nbsp;&nbsp;录</div>
       <div class="mapbox">
        <ul class="map">
            <li>第一章</li>
            <li>第二章</li>
            <li>第三章</li>
        </ul>
       </div>
   </div>
  <script>
        $('.banner').mouseover(function(){
            $('.mapbox').slideDown(150)
        })
        $('.banner').mouseout(function(){
            $('.mapbox').slideUp(150)
        })
  </script>
</body>

3.2 下拉菜单切换函数写法：

<body>
   <div class="box">
       <div class="banner">目&nbsp;&nbsp;&nbsp;录</div>
       <div class="mapbox">
        <ul class="map">
            <li>第一章</li>
            <li>第二章</li>
            <li>第三章</li>
        </ul>
       </div>
   </div>
  <script>
       $('.banner').hover(function(){
          $('.mapbox').slideDown('150')
       },function(){
        $('.mapbox').slideUp('150')
       })
  </script>
</body>

3.3 下拉菜单最简写法 ( 只有一个函数 )：

** 实现原理：**里面只写一个函数的话，经过离开都会触发函数从而触发里面的内容

<body>
   <div class="box">
       <div class="banner">目&nbsp;&nbsp;&nbsp;录</div>
       <div class="mapbox">
        <ul class="map">
            <li>第一章</li>
            <li>第二章</li>
            <li>第三章</li>
        </ul>
       </div>
   </div>
  <script>
       $('.banner').hover(function(){
          $('.mapbox').slideToggle('150')
       })
  </script>
</body>

四：动画排队现象：

动画函数一旦触发必定执行完毕，意味着如果刚才的下拉菜单我们迅速地经过了十次，那么哪怕你不再移动上去，它也会把这十次给做完，这就是动画排队现象，这明显是不符合我们对下拉菜单效果的期望的，因此我们需要学习如何停止动画排队现象

**处理方法：stop () **

** 注意一定要放在动画函数的前面 ！！！这个方法就是触发时先停止之前的动画，再执行本次动画函数，其实有些类似于排他思想**

*改进下拉菜单（停止了动画排队现象）： *

<script>
        $('.banner').hover(function(){
           $('.mapbox').stop().slideToggle('150')  //注意stop 方法写在动画函数前面，先停止动画，再执行动画
        })
   </script>

五：淡入淡出效果

淡入淡出最终目的一样也是元素的显示与隐藏，只不过这个更有科技感，像隐身一样消失，再像隐身解除一样地显现出来，下面是淡入淡出的几个方法：

  • fadeIn (* speed，easing，fn ****) *：淡入
  • fadeOut (* speed，easing，fn ****) *：淡出
  • fadeToggle (* speed，easing，fn ****) *：淡入淡出效果切换
  • fadeTo ( speed，opacity，easing，fn ) ：修改不透明度（speed，opcity 必写）

参数含义：

参数speedeasingfnopacity含义速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear，往往不写回调函数，在动画执行完后调用动画函数内的内容不透明度，取值 0-1

5.1 淡入函数 fadeIn

让元素慢慢的显示出来，参数可写可不写

    <style>
      div{
          width: 300px;
          height: 300px;
          background-color: rgb(255, 188, 188);
          display: none;
      }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
   <button>淡入</button>
   <div></div>
   <script>
        $('button').click(function(){
            $('div').fadeIn(2000,'swing',function(){
                alert('我淡入啦')
            })
        })
   </script>
</body>

淡入效果：

5.2 淡出函数 fadeOut

    <style>
      div{
          width: 300px;
          height: 300px;
          background-color: rgb(255, 188, 188);
      }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
   <button>淡出</button>
   <div></div>
   <script>
        $('button').click(function(){
            $('div').fadeOut(2000,'swing',function(){
                alert('我淡出啦')
            })
        })
   </script>
</body>

淡出效果：

5.3 淡入淡出转换函数 fadeToggle

用于淡入淡出的切换，其实为判断有没有显示或隐藏，如果显示了，就让其淡出隐藏，如果没有显示，就淡入显示

    <style>
      div{
          width: 300px;
          height: 300px;
          background-color: rgb(255, 188, 188);
      }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
   <button>切换</button>
   <div></div>
   <script>
        $('button').click(function(){
            $('div').fadeToggle(2000,'swing',function(){
                alert('我切换啦')
            })
        })
   </script>
</body>

淡入显示效果：

淡出隐藏效果：

5.4 不透明度改变函数 fadeTo

*用于切换不透明度，参数为 0-1，这个 与 是 speed *必写参数

    <style>
      div{
          width: 300px;
          height: 300px;
          background-color: rgb(255, 188, 188);
      }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
   <button>切换不透明度</button>
   <div></div>
   <script>
        $('button').click(function(){
            $('div').fadeTo(2000,0.3,function(){
                alert('我切换不透明度啦')
            })
        })
   </script>
</body>

不透明度切换效果：

六：自定义动画 animate

我们在原生JS 写过一个动画函数，并且封装在了单独的一个JS 文件中，随用随调即可，但是jQuery也给我们封装好了一个动画函数，并且比原生JS 的更加强大

用法：**animate ( params , speed , easing , fn**** ) **** params 为必写参数 ！！！**

参数含义:

参数paramsspeedeasingfn含义写想要更改的样式属性，以对象形式传递，必写速度参数，可写为 slow，nomarl， fast，也可以写成特定的毫秒数值用来指定特定的过度效果，默认为 swing，可换为 linear回调函数，在动画执行完后调用动画函数内的内容

6.1 自定义动画animate 案例

    例如我们想让元素移动到距离左边 300px，距离上面 200px，宽度增加100px，高度增加 50px，并且不透明度变为 0.7，并要求 2s 完成，完成后弹出 “我完成啦”，用自定义动画就及其简单啦，**注意以对象形式传入要改变的属性**

    <style>
      div{
          position: absolute;
          width: 300px;
          height: 300px;
          background-color: rgb(255, 188, 188);
      }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
   <button>移动</button>
   <div></div>
   <script>
        $('button').click(function(){
            $('div').animate(
            {
                "left":"300px",
                "top":"200px",
                "opacity":"0.7",
                "width":"400px"
            },2000,function(){
                alert('我完成啦')
            })
        })
   </script>
</body>

自定义动画改变效果：

** **至此为止，这就是jQuery的四大基本动画，谢谢大家支持！！

标签： jquery 前端 html5
本文转载自: https://blog.csdn.net/weixin_52212950/article/details/124213166
版权归原作者 卡卡西最近怎么样 所有， 如有侵权，请联系我们删除。
登录后发布评论

“你真的拿捏 jQuery 四大动画效果了吗？【入门篇超详细 零基础适用】”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

双重锁定：零信任沙箱 完美的安全保障

企业网络安全人员必知的云原生安全

Linux——进程（上）

【Linux】centos7安装php7.4

CentOS9下载安装教程

Visual Studio（vs）下载安装C/C++运行环境配置和基本使用注意事项

Linux Vim教程（三）：插入模式与命令模式

文章导航