jQuery教程：如何使用jQuery加载和动画化内容-js教程-PHP中文网

jQuery教程：如何使用jQuery加载和动画化内容

王林

发布： 2023-09-03 21:21:07

原创

1421人浏览过

点击网页上的任何链接通常会在我们的浏览器中加载该 url 的内容。这就是互联网上大多数链接和网站的工作方式。但是，您也可以使用一些代码更改此默认行为，以将新 url 的内容加载到当前网页的特定元素中，而无需重新加载整个页面。

这可以通过一点 JavaScript 的帮助来实现。我们将使用 jQuery 库来完成与动画和 AJAX 内容加载相关的繁重工作。

您还可以使用普通 JavaScript 加载内容并为其制作动画。

准备标记

我们将使用一个非常简单的网页来演示效果的工作原理。但是，您在这里学到的原则也适用于其他网站。这是我们将加载并制作动画的网站主页的标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="team.html">Our Team</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

    <span class="loader"></span>

    <section id="content">
        @@##@@

        <h1>Embrace Pawsitivity, Transform Lives!</h1>

        <p>Welcome to Pawsitive Care Foundation, a dedicated organization working towards the well-being and protection of animals.</p>

        <p>Our animal Welfare NGO provides a range of services to support animal welfare:</p>

        <ol>
            <li>Rescue and rehabilitation of abused and abandoned animals</li>
            <li>Adoption programs to find loving homes for animals in need</li>
            <li>Education and awareness campaigns to promote responsible pet ownership</li>
            <li>Lobbying and advocacy for stronger animal protection laws</li>
            <li>Collaboration with local communities to implement spay/neuter programs</li>
        </ol>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="load-content.js"></script>
</body>
</html>

登录后复制

标记链接到 style.css 文件，其中包含用于设计所有网页样式的 CSS。网页正文包含 nav 元素，其中包含用户可以访问的链接列表。有一个 span 元素和 loader 类。每当用户单击导航中的链接之一时，我们将显示和隐藏此加载器元素。该加载程序将指示当前正在加载页面。

之后，我们有一个 section 元素，其中 id 设置为 content。我们网站的每个网页都会有此部分。本节中的内容是我们将使用 AJAX 加载的内容。我们在 body 元素末尾附近还有两个 script 标签。第一个 script 标签加载 jQuery，而第二个标签加载我们自己的 JavaScript 文件。

在一些 CSS 的帮助下，我们的页面如下所示：

jQuery教程：如何使用jQuery加载和动画化内容

您可以创建名为 about.html、team.html 和 contact.html 的类似页面。

设置加载程序和内容的样式

我们现在将学习如何使用 CSS 为加载器设置动画，以便在加载新内容的过程中加载器不断旋转。这是让我们的加载程序保持旋转的 CSS。

 .loader {
   background: white;
   width: 30px;
   height: 30px;
   display: inline-block;
   position: absolute;
   right: 2rem;
   top: 1.2rem;
   animation: 0.5s infinite spin;
   border-radius: 50%;
   border-top: 5px solid black;
   border-bottom: 5px solid gray;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
 }

登录后复制

这里有几点需要注意。首先，装载机具有绝对定位。这会将其脱离文档的正常流程，以便我们可以将其放置在任何我们想要的位置，而不会中断其他内容的流程。

我们使用 animation 属性根据 spin 关键帧值连续为加载程序设置动画，其中每个动画循环在 0.5 秒内完成。

使用 border-radius: 50% 使我们的加载器变圆，因为它具有相同的宽度和高度。在顶部和底部使用不同的边框颜色只是一种样式偏好。

我们还将使用以下 CSS 来确保我们正在加载的内容覆盖正文的整个宽度。

section#content {
   width: 100% !important;
}

登录后复制

当我们为主要内容制作动画时，这将变得很重要。

您想要如何设计所有这些网页上的一般内容的样式取决于您。

处理链接点击和内容加载

如果此时加载任何网页，您会注意到的一件事是加载器会不断显示。我们只希望它在加载内容时出现。一旦我们的网页准备好，我们可以使用以下代码隐藏加载程序：

$(document).ready(function () {
    $(".loader").fadeOut();
});

登录后复制

由于我们想要控制用户单击导航菜单中的任何链接时发生的情况，因此我们需要为这些链接附加一个侦听器。侦听器的处理函数将包含我们想要在每次链接单击时执行的所有代码。这是我们的点击处理程序的代码：

$("nav li a").on("click", function(event) {
    event.preventDefault();
    
    const loadURL = `${$(this).attr("href")} #content`;
    $("#content").hide("fast", function() {
      loadContent(loadURL);
    });   
    $(".loader").fadeIn("normal");
    
    window.location.hash = $(this).attr("href").slice(0, -5);
});

登录后复制

我们在点击处理程序中做的第一件事是防止发生默认操作。本例中的默认操作是指用户导航到链接的 URL。

由于我们已阻止在浏览器中加载链接的 URL，因此我们有责任为查看者手动加载此内容。为此，我们首先获取所单击链接的 href 属性的值。我们还在 URL 末尾附加 #content 因为这是我们实际想要加载的内容。

我们在 jQuery 中使用 hide() 方法来隐藏 #content 部分。我们隐藏此部分是因为它当前包含用户尝试离开的页面的标记。 hide() 方法接受字符串或数字作为其第一个参数。该值决定隐藏所选元素所需的时间。将其设置为快速可在 200 毫秒内隐藏内容。

hide() 方法会对所选元素的宽度、高度和不透明度进行动画处理，直到它们变为 0。一旦它们达到零，display 属性就会设置为 none。

第二个参数是一个回调函数，在隐藏动画完成后触发。我们在回调函数中调用 loadContent() 。

接下来，我们使用 fadeIn() 方法使我们的 loader 元素在加载页面内容时可见。我们还更新页面的 URL 以添加反映当前单击的链接的哈希值。

现在，我们将定义 loadContent() 函数，该函数接受您要加载的 URL 作为其参数。 loadContent() 函数使用另一个名为 showNewContent() 的辅助函数，如下所示：

function loadContent(url) {
    $("#content").load(url, function() {
      showNewContent();
    });
}

function showNewContent() {
    $("#content").show("fast", function() {
      $(".loader").fadeOut("fast");
    });
}

登录后复制

loadContent() 方法使用 jQuery 中内置的 load() 方法来加载 #content 元素中指定 URL 的内容。加载完成后执行回调函数。

我们使用回调函数来执行另一个名为 showNewContent() 的函数。还记得我使用 hide() 方法来隐藏 #content 元素吗？现在，我们将借助 show() 方法使其再次可见。

show() 方法基本上与 hide() 方法相反。它将通过逐渐增加所选元素的宽度、高度和不透明度来使所选元素可见。

在上一节中，我使用了一些 CSS 来确保内容元素的宽度始终保持在 100%。这样做是为了抵消 show() 和 hide() 更新所选元素宽度的影响。在我看来，保持宽度不变，同时对高度和不透明度进行动画处理看起来更好。