jQuery教學：如何使用jQuery載入和動畫化內容-js教程-PHP中文網

首頁

web前端

js教程

jQuery教學：如何使用jQuery載入和動畫化內容

王林

Sep 03, 2023 pm 09:21 PM

jquery載入動畫化

點擊網頁上的任何連結通常會在我們的瀏覽器中載入該 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">
        <img  src="/static/imghwm/default1.png"  data-src="dog.svg"  class="lazy" / alt="jQuery教學：如何使用jQuery載入和動畫化內容" >

        <h1 id="Embrace-Pawsitivity-Transform-Lives">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() 更新所选元素宽度的影响。在我看来，保持宽度不变，同时对高度和不透明度进行动画处理看起来更好。

最终想法

在本教程中，我们学习了如何使用流行的 jQuery 库中的内置方法来加载我们网站上不同网页的内容并为其设置动画。

如果您想在网站上重现效果，请记住一些事项。首先，标记应该有一个内容元素，您可以在 AJAX 请求的帮助下动态加载新内容。其次，所有链接的单击处理程序应防止导航到单击的链接的默认行为。第三，您尝试以这种方式加载的网页最好属于同一域、子域等。这是因为它们将受到同源策略的约束。

如果您不打算使用 jQuery，也可以使用纯 JavaScript 实现相同的效果。

以上是jQuery教學：如何使用jQuery載入和動畫化內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。