jQuery动画-CSDN博客

本文介绍使用jQuery实现的动画效果，包括显示与隐藏、滑动时动画、淡入淡出效果及动画切换等。通过实例展示了如何设置动画的速度、效果及回调函数。

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

jQuery动画

1. 实现显示与隐藏

$元素名.show([speed],[easing],[fn]);
$元素名.hide([speed],[easing],[fn]);

speed: 预定速度或表示动画时长的毫秒数值（slow（慢）, normal（平常） , fast（快） , 值（毫秒为单位））。
easing: 用来指定切换效果，默认：swing，可用参数：linear。
fn ：在动画完成后执行该函数，每个元素执行一次。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <style>
        #di1{
            width: 200px;
            height: 200px;
            background-color: rgb(145, 106, 57);
        }
    </style>
</head>
<body>
    <div id="di1"></div>
    <script>
        /*
          显示与隐藏 
          1.无动画版本- 没有参数时
            * show() - 显示
            * hide() - 隐藏
          2.有动画版本 - 同时改变宽度和高度 - 有参数时
            * show(speed, callback)
              *speed - 动画执行的时长，单位为毫秒
              *callback - 动画执行完毕后的回调函数
        */
        //1.隐藏（hide）动画执行时长（1000毫秒），执行完后调用后面的函数。
        $('#di1').hide(1000,function(){//隐藏动画，时长1000
            //2.显示（show）动画执行时长（2000毫秒），执行完后调用后面的函数。
            $('#di1').show(2000,function(){//显示动画，时长2000
                //3.隐藏（hide）动画执行时长（8000毫秒），执行完后调用后面的函数。
                $('#di1').hide(8000,function(){//隐藏动画，时长1000
                //4.显示（show）动画执行时长（8000毫秒）
                    $('#di1').show(8000);//显示动画，时长1000
                });
            });
        });

    </script>
</body>
</html>

2.滑动时动画

$元素名.slideUp([speed],[easing],[fn]);
$元素名.slideDown([speed],[easing],[fn]);

speed: 预定速度或表示动画时长的毫秒数值（slow（慢）, normal（平常） , fast（快） , 值（毫秒为单位））。
easing: 用来指定切换效果，默认：swing，可用参数：linear。
fn ：在动画完成后执行该函数，每个元素执行一次。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: rgb(145, 106, 57);
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /*
           滑动时动画 - slideUP()和slideDown()
           * 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
           * 效果 - 改变指定元素的高度
        */
        //1.向上滑动（slideUp），动画时长为（10000毫秒）
        $('#box').slideUp(10000);
         //2.向下滑动（slideDown），动画时长为（10000毫秒）
        $('#box').slideDown(10000);
    </script>
</body>

3.淡入淡出效果

$元素名.sfadeln([speed],[easing],[fn]);
$元素名.fadeOut([speed],[easing],[fn]);

speed: 预定速度或表示动画时长的毫秒数值（slow（慢）, normal（平常） , fast（快） , 值（毫秒为单位））。
easing: 用来指定切换效果，默认：swing，可用参数：linear。
fn ：在动画完成后执行该函数，每个元素执行一次。

代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        //通过改变元素的透明度，来实现淡入与淡出
        $('#box').fadeOut(3000);//淡出
        $('#box').fadeIn(3000);//淡入
    </script>
</body>
</html>