jQuery教學：如何使用jQuery載入和動畫化內容
- 王林原創
- 2023-09-03 21:21:071452瀏覽
點擊網頁上的任何連結通常會在我們的瀏覽器中載入該 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="dog.svg" / alt="jQuery教學：如何使用jQuery載入和動畫化內容" >
<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 的幫助下，我們的頁面如下所示：
#您可以建立名為 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中文網其他相關文章！