jQuery 튜토리얼: jQuery를 사용하여 콘텐츠를 로드하고 애니메이션을 적용하는 방법

웹페이지의 링크를 클릭하면 일반적으로 해당 URL의 콘텐츠가 브라우저에 로드됩니다. 이것이 인터넷상의 대부분의 링크와 웹사이트가 작동하는 방식입니다. 그러나 일부 코드를 사용하여 이 기본 동작을 변경하여 전체 페이지를 다시 로드하지 않고도 새 URL의 콘텐츠를 현재 웹 페이지의 특정 요소에 로드할 수도 있습니다.

이는 JavaScript의 약간의 도움으로 달성할 수 있습니다. 애니메이션 및 AJAX 콘텐츠 로딩과 관련된 무거운 작업을 수행하기 위해 jQuery 라이브러리를 사용할 것입니다.

일반 JavaScript를 사용하여 콘텐츠를 로드하고 애니메이션을 적용할 수도 있습니다.

마킹 준비

효과가 어떻게 작동하는지 보여주기 위해 매우 간단한 웹페이지를 사용하겠습니다. 그러나 여기서 배우는 원칙은 다른 웹사이트에도 적용됩니다. 이것은 우리가 로드하고 애니메이션화할 웹사이트의 홈 페이지에 대한 마크업입니다.

으아악

태그는 모든 웹 페이지의 스타일을 지정하는 데 사용되는 CSS가 포함된 style.css 파일에 연결됩니다. 웹페이지 본문에는 nav 元素，其中包含用户可以访问的链接列表。有一个 span 元素和 loader 클래스가 포함되어 있습니다. 사용자가 탐색의 링크 중 하나를 클릭할 때마다 이 로더 요소를 표시하고 숨깁니다. 로더는 페이지가 현재 로드 중임을 나타냅니다.

그 다음에는 jQuery를 로드하는 section 元素，其中 id 设置为 content。我们网站的每个网页都会有此部分。本节中的内容是我们将使用 AJAX 加载的内容。我们在 body 元素末尾附近还有两个 script 标签。第一个 script 태그 하나와 자체 JavaScript 파일을 로드하는 두 번째 태그가 있습니다.

CSS를 사용하면 페이지가 다음과 같이 보입니다.

about.html, team.html 및 contact.html이라는 유사한 페이지를 만들 수 있습니다.

스타일링 로더 및 콘텐츠

이제 CSS를 사용하여 새 콘텐츠를 로드하는 동안 회전하도록 로더에 애니메이션을 적용하는 방법을 알아봅니다. 이것은 로더를 계속 회전시키는 CSS입니다.

으아악

여기서 주의할 점이 몇 가지 있습니다. 첫째, 로더에는 절대 위치 지정 기능이 있습니다. 이렇게 하면 문서의 일반적인 흐름에서 벗어나 다른 콘텐츠의 흐름을 방해하지 않고 원하는 곳에 배치할 수 있습니다.

각 애니메이션 루프가 0.5초 안에 완료되는 animation 属性根据 spin 키프레임 값을 사용하여 로더에 지속적으로 애니메이션을 적용합니다.

로더의 너비와 높이가 동일하므로 border-radius: 50%를 사용하여 로더를 둥글게 만듭니다. 상단과 하단에 서로 다른 테두리 색상을 사용하는 것은 단지 스타일 선호 사항일 뿐입니다.

또한 다음 CSS를 사용하여 로드 중인 콘텐츠가 본문의 전체 너비를 덮도록 할 것입니다.

으아악

메인 콘텐츠에 애니메이션을 적용할 때 이는 중요해집니다.

이 모든 페이지의 일반 콘텐츠 스타일을 지정하는 방법은 귀하에게 달려 있습니다.

링크 클릭 및 콘텐츠 로딩 처리

이때 웹페이지를 로드하면 눈에 띄는 한 가지는 로더가 계속 표시된다는 것입니다. 우리는 콘텐츠가 로드될 때만 나타나기를 원합니다. 페이지가 준비되면 다음 코드 숨김 로더를 사용할 수 있습니다.

으아악

사용자가 탐색 메뉴의 링크를 클릭할 때 어떤 일이 발생하는지 제어하고 싶기 때문에 이러한 링크에 리스너를 연결해야 합니다. 리스너의 핸들러 함수에는 링크를 클릭할 때마다 실행하려는 모든 코드가 포함됩니다. 클릭 핸들러의 코드는 다음과 같습니다.

으아악

클릭 핸들러에서 가장 먼저 하는 일은 기본 동작이 발생하지 않도록 방지하는 것입니다. 이 예의 기본 작업은 사용자가 링크된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!