jQuery教學：如何使用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/imghw/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 的幫助下，我們的頁面如下所示：
#您可以建立名為 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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
jQuery引用方法詳解：快速上手指南
Feb 27, 2024 pm 06:45 PM
jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
jQuery如何移除元素的height屬性？
Feb 28, 2024 am 08:39 AM
jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
如何判斷jQuery元素是否具有特定屬性？
Feb 29, 2024 am 09:03 AM
如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬
了解jQuery中eq的作用及應用場景
Feb 28, 2024 pm 01:15 PM
jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s
使用jQuery為表格新增一行的方法介紹
Feb 29, 2024 am 08:12 AM
jQuery是一個受歡迎的JavaScript函式庫，廣泛用於網頁開發。在網頁開發過程中，經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行，並提供具體的程式碼範例。首先，我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫：
