jQuery效果

关注

原创最新推荐文章于 2026-07-06 16:12:32 发布 724 阅读 AI 写同款· GEO 优化 ›

jQuery动态动画效果本文介绍了jQuery实现动态动画效果的主要方法，包括显示/隐藏、淡入/淡出、滑动等基本动画效果，以及参数动画和动画链。通过代码示例展示了如何使用show/hide、fadeIn/fadeOut、slideUp/slideDown等方法创建各种动画效果，并介绍了动画回调函数、停止动画和链式调用等高级用法。最后提供了一个综合演示代码，展示了多种动画效果的组合使用。这些jQuery动画方法可以帮助开发者创建丰富的网页交互效果。阅读详情

1.jQuery效果－隐藏和显示

我们可以通过jQuery的hide()和show()方法来隐藏和显示HTML元素
语法如下

$(selector).hide(speed,callback);
\$(selector).show(speed,callback);

其中speed参数为可选参数，用其来确定隐藏／显示的速度，可以取以下值’slow’，’fast’，或毫秒
callback也为可选参数，它为操作完成后所执行的回调函数

无参的hide()，show()方法实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('.hide').click(function () {
                $('p').hide();
            });
            $('.show').click(function () {
                $('p').show();
            });
        });
    </script>
</head>
<body>
    <p>如果点隐藏我就会消失，点显示我就会出来</p>
    <button class="hide" type="button">隐藏</button>
    <button class="show" type="button">显示</button>
</body>
</html>

我们也可以使用toggle()方法来切换hide()和show()方法

toggle实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('p').toggle();
            });
        });
    </script>
</head>
<body>
    <p>切换</p>
    <button type="button">切换</button>
</body>
</html>

2.jQuery效果-淡入淡出

通过jQuery我们可以实现元素的淡入淡出效果
jQuery拥有下面四种fade方法

.fadeIn()
.fadeOut()
.fadeToggle()
.fadeTo()

(1)fadeIn
fadeIn的语法如下

$(selector).fadeIn(speed,callback);

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeIn();
                $('.div2').fadeIn('slow');
                $('.div3').fadeIn(3000);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;display: none;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;display: none;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;display: none;background-color: blue;">

    </div><br>
</body>
</html>

(2)fadeOut
fadeOut用于淡出可见元素

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeOut();
                $('.div2').fadeOut('slow');
                $('.div3').fadeOut(3000);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;background-color: blue;">

    </div><br>
</body>
</html>

(3)fadeToggle
fadeToggle方法可以在fadeIn()与fadeOut()方法之间进行切换

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeToggle();
                $('.div2').fadeToggle('slow');
                $('.div3').fadeToggle(3000);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡入淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;background-color: blue;">

    </div><br>
</body>
</html>

(4)fadeTo
fadeTo()方法允许渐变为给定的不透明度

实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeTo('slow',0.15);
                $('.div2').fadeTo('slow',0.4);
                $('.div3').fadeTo('slow',0.7);
            });
        });
    </script>
</head>


    <button type="button">点击这里使三个矩形淡出</button>
    <br><br>
    <div class="div1" style="width: 80px;height: 80px;background-color: red;">

    </div><br>
    <div class="div2" style="width: 80px;height: 80px;background-color: green;">

    </div><br>
    <div class="div3" style="width: 80px;height: 80px;background-color: blue;">

    </div><br>
</body>
</html>

3.jQuery效果-滑动

我们可以在元素上创建滑动效果
jQuery拥有以下滑动方法

.slideDown()
.slideUp()
.slideToggle()

slideToggle实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('.div1').fadeTo('slow',0.15);
                $('.div2').fadeTo('slow',0.4);
                $('.div3').fadeTo('slow',0.7);
            });
        });
    </script>
</head>


<button type="button">点击这里使三个矩形淡出</button>
<br><br>
<div class="div1" style="width: 80px;height: 80px;background-color: red;">

</div><br>
<div class="div2" style="width: 80px;height: 80px;background-color: green;">

</div><br>
<div class="div3" style="width: 80px;height: 80px;background-color: blue;">

</div><br>
</body>
</html>

4.jQuery效果-动画

jQuery的animate()方法用于创建自定义动画
语法

$(selector).animate({params},speed,callback);

.必须的params参数定义形成动画的CSS属性
.可选的speed参数规定效果的时长
.可选的callback参数是动画完成后执行的回调

(1)下面的例子演示animate()方法的简单应用，它把div元素移动到左边，知道left属性等于250像素为止
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('div').animate({left:'300px'},4000);
            });
        });
    </script>
</head>
<body>

    <button type="button">开始动画</button>
    <br><br>
    <div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
    </div>
</body>
</html>

(2)生成动画的过程中我们可以使用多个属性
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('div').animate({
                    heigth:'150px',
                    width:'150px',
                    opacity:'0.5',
                    left:'300px'},4000);
            });
        });
    </script>
</head>
<body>

    <button type="button">开始动画</button>
    <br><br>
    <div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
    </div>
</body>
</html>

(3)队列功能
jQuery提供针对动画的队列功能
实例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                var div = $('div');
                div.animate({height:'300px',opacity:'0.4'},'slow')
                div.animate({width:'300px',opacity:'0.8'},'slow')
                div.animate({height:'100px',opacity:'0.4'},'slow')
                div.animate({width:'100px',opacity:'0.8'},'slow')
            });
        });
    </script>
</head>
<body>

    <button type="button">开始动画</button>
    <br><br>
    <div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">
    </div>
</body>
</html>