下面是关于“jQuery等待效果示例”的完整攻略，包括两条示例说明：

1. 简介

jQuery是一个非常流行的JavaScript库，它可以极大地简化JavaScript编程的过程，包括HTML元素遍历和操作、事件处理、动画效果等。其中，效果部分是jQuery非常强大的特性之一，可以实现各种各样的漂亮效果。等待效果是jQuery效果中的一个子集，可以用来告诉用户某些操作正在运行中，让用户知道当前页面没有卡死。在接下来的示例中，我们将演示如何在jQuery中使用常见的两种等待效果。

2. 示例说明

2.1 实现方式

下面的示例演示了如何使用jQuery实现一个简单的等待效果，当点击按钮时，显示一个旋转的图标，表示正在等待操作完成，当操作完成后，隐藏旋转图标。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery等待效果示例</title>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <style>
        #loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -16px;
            margin-left: -16px;
        }
    </style>
</head>
<body>
    <div id="loading">
        <img src="loading.gif">
    </div>
    <button id="btn">点击开始</button>
    <script>
        $(document).ready(function() {
            $('#btn').on('click', function() {
                $('#loading').show();
                $.ajax({
                    url: 'test.php',
                    dataType: 'json',
                    success: function(data) {
                        console.log(data);
                        $('#loading').hide();
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }
                });
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们定义了一个id为"loading"的div元素，其中包含一个gif格式的图片。我们首先将其隐藏，然后当点击按钮后，使用jQuery的show()方法显示"loading"元素。接着，我们使用jQuery的ajax()方法向服务器请求数据，在请求过程中，等待效果展示给用户看。当请求完成后，使用hide()方法隐藏"loading"元素。

2.2 使用插件

下面是另外一种实现等待效果的方式，也是比较常用的，使用jQuery插件loadingOverlay。这是一个轻量级的jQuery插件，支持多达6种不同的等待效果，包括旋转罗盘、计时器、进度条等。使用loadingOverlay插件可以帮助我们更加快速方便地实现等待效果，同时也增加了我们页面的用户体验。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery等待效果示例</title>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <script src="jquery.loadingoverlay.min.js"></script>
    <style>
        .container {
            margin-top: 50px;
            text-align: center;
        }
        button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="my-spinner"></div>
        <h2>LoadingOverlay</h2>
        <button id="btn1">点击开始</button>
        <button id="btn2">点击开始（自定义）</button>
    </div>
    <script>
        $(document).ready(function() {
            $('#btn1').on('click', function() {
                $.LoadingOverlay("show");
                $.ajax({
                    url: 'test.php',
                    dataType: 'json',
                    success: function(data) {
                        console.log(data);
                        $.LoadingOverlay("hide");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.status);
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                    }
                });
            });

            $('#btn2').on('click', function() {
                $.LoadingOverlay("show", {
                    image: "",
                    fontawesome: "fa fa-spinner fa-spin",
                    background: "rgba(0, 0, 0, 0.8)"
                });
                setTimeout(function() {
                    $.LoadingOverlay("hide");
                }, 5000);
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们引入了loadingOverlay插件，并定义了两个按钮。当点击第一个按钮时，使用loadingOverlay的show()方法展示了一个旋转罗盘等待效果，然后使用ajax()方法请求数据。当请求完成后，使用hide()方法隐藏旋转罗盘效果。当点击第二个按钮时，我们使用show()方法自定义了等待效果的样式，包括样式名称、背景色等等。同时设置了一个setTimeout延迟函数，让效果停留5秒钟后再消失。

这两个示例演示了两种不同的等待效果实现方式，相信可以在开发中发挥较为重要的作用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery等待效果示例 - Python技术站

jquery等待效果示例

1. 简介

2. 示例说明

2.1 实现方式

2.2 使用插件

相关文章