jQuery 动画效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46758732/article/details/119532041

本文详细介绍了jQuery中常用的效果，包括显示隐藏、滑动、淡入淡出和自定义动画animate。展示了一系列方法的使用，如show(), hide(), slideDown(), fadeIn(), animate()等，并解析了它们的参数和用法，特别是如何控制动画速度、切换效果和队列管理。" 114503277,7876319,D3QN算法详解与应用实践,"['深度学习', '强化学习', '算法', '神经网络']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 给我们封装了很多动画效果，最为常见的如下：
显示隐藏：show（）、hiden()、toggle（）
滑动：slideDown() 、slideUp（）、slideToggle（）
淡入淡出：fadeln（）、fadeOut（）、fadeToggle（）、fadeTo（）
自定义动画：animate（）

显示隐藏效果

显示效果
显示语法规范

show（[speed],[easing],[fn]）

显示参数
（1）参数都可以省略，无动画直接显示
（2）speed：三种预定速度之一的字符串（”slow",“nomal”,or “fast”）或表示动画时长的毫秒数值（如：1000）。
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn：回调函数，在动画完成时执行的函数，每一个元素执行一次。

隐藏效果
隐藏语法规范
hide（[speed],[easing],[fn]）
隐藏参数同上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示与隐藏</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>却换</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").show(1000);//显示
            })
            $("button").eq(1).click(function(){
                $("div").hide(1000);//隐藏
            })
            $("button").eq(2).click(function(){
                $("div").toggle(1000);//切换
            })
        })
    </script>

</body>
</html>

在这里插入图片描述

滑动效果

上拉：slideUp()
下拉：slideDown()
切换：slideToggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动下拉菜单</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: lightseagreen;
            display: none;
        }
    </style>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                //下滑动slideDown()
                $("div").slideDown(500);
            })
            $("button").eq(1).click(function(){
                //上滑动slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function(){
                //滑动切换slideToggle()
                $("div").slideToggle(500);
            })
        })
    </script>
</body>
</html>

在这里插入图片描述

事件切换

$(“div”).hover()
在这里插入图片描述

动画队列及停止排队方法

1、动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2、停止队列

stop（）

stop()方法用于停止动画或者效果。
注意：stop（）写到动画或者效果的前面，相当于停止结束上次的动画。

淡入淡出效果

1、淡入效果语法规范

fadeIn（[speed],[easing],[fn])

2、淡出效果

fadeOut（[speed],[easing],[fn])

3、淡入淡出切换

fadeToggle（[speed],[easing],[fn])

4、修改透明度

fadeTo（[speed],[easing],[fn]）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出效果</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: #b25686;

        }
    </style>
    <script src="JS/jquery.min.js"></script>
</head>
<body>
   <button>淡入效果</button>
   <button>淡出效果</button>
   <button>淡入淡出切换</button>
   <button>修改透明度</button>
   <div></div>
   <script>
       $(function(){
           $("button").eq(0).click(function(){
               //淡入fadeIn（）
               $("div").fadeIn(1000);
           })
           $("button").eq(1).click(function(){
               //淡出fadeIn（）
               $("div").fadeOut(1000);
           })
           $("button").eq(2).click(function(){
               //淡入fadeToggle（）
               $("div").fadeToggle(1000);
           })
           $("button").eq(3).click(function(){
               //修改透明度fadeTo（）
               $("div").fadeTo("slow",0.15);
           })
       })
   </script>
</body>
</html>