jQuery チュートリアル: jQuery を使用してコンテンツをロードしてアニメーション化する方法

Web ページ上のリンクをクリックすると、通常、その URL のコンテンツがブラウザに読み込まれます。これが、インターネット上のほとんどのリンクや Web サイトの仕組みです。ただし、コードを使用してこのデフォルトの動作を変更し、ページ全体を再読み込みせずに、新しい URL のコンテンツを現在の Web ページの特定の要素に読み込むこともできます。

これは、JavaScript を少し活用することで実現できます。 jQuery ライブラリを使用して、アニメーションと AJAX コンテンツの読み込みに関連する重労働を実行します。

プレーンな JavaScript を使用して、コンテンツをロードしてアニメーション化することもできます。

マークの準備

非常に単純な Web ページを使用して、エフェクトがどのように機能するかを示します。ただし、ここで学ぶ原則は他の Web サイトにも当てはまります。これは、ロードしてアニメーション化する Web サイトのホームページのマークアップです。

リーリー

タグは、すべての Web ページのスタイルを設定するために使用される CSS を含む style.css ファイルにリンクします。 Web ページの本文には、ユーザーがアクセスできるリンクのリストを含む nav 要素が含まれています。 span 要素と loader クラスがあります。ユーザーがナビゲーション内のいずれかのリンクをクリックするたびに、このローダー要素が表示または非表示になります。ローダーは、ページが現在ロード中であることを示します。

その後、section 要素があり、id が content に設定されます。当社の Web サイトのすべてのページにこのセクションがあります。このセクションの内容は、AJAX を使用してロードする内容です。また、body 要素の終わり近くに 2 つの script タグがあります。最初の script タグは jQuery をロードし、2 番目のタグは独自の JavaScript ファイルをロードします。

CSS を使用すると、ページは次のようになります:

about.html、team.html、contact.html という名前の同様のページを作成できます。

ローダーとコンテンツのスタイルを設定する

CSS を使用してローダーをアニメーション化し、新しいコンテンツの読み込み中にローダーが回転するようにする方法を学習します。これはローダーの回転を維持する CSS です。

リーリー

ここで注意すべき点がいくつかあります。まず、ローダーには絶対位置があります。これにより、ドキュメントの通常のフローから除外されるため、他のコンテンツの流れを妨げることなく、どこにでも配置できるようになります。

animation プロパティを使用して、spin キーフレーム値に基づいてローダーを継続的にアニメーション化します。各アニメーション ループは 0.5 秒で完了します。

#border-radius: 50% を使用すると、ローダーの幅と高さが同じになるため、ローダーが丸くなります。上下で異なる境界線の色を使用するのは、単なるスタイルの好みです。

また、次の CSS を使用して、読み込むコンテンツが本文の幅全体をカバーするようにします。

リーリー

これは、メイン コンテンツをアニメーション化するときに重要になります。

これらすべてのページの一般的なコンテンツのスタイルをどのように設定するかは、あなた次第です。

リンクのクリックとコンテンツの読み込みの処理

この時点で Web ページをロードすると、ローダーが表示され続けることに気づくでしょう。コンテンツの読み込み時にのみ表示されるようにしたいと考えています。ページの準備ができたら、次の分離コードローダーを使用できます:

リーリー

ユーザーがナビゲーション メニューのリンクをクリックしたときに何が起こるかを制御したいため、これらのリンクにリスナーをアタッチする必要があります。リスナーのハンドラー関数には、リンクがクリックされるたびに実行するコードがすべて含まれます。クリック ハンドラーのコードは次のとおりです:

リーリー

クリック ハンドラーで最初に行うことは、デフォルトのアクションが発生しないようにすることです。この例のデフォルトのアクションは、ユーザーがリンクされた URL に移動することです。

リンクされた URL がブラウザに読み込まれるのをブロックしたため、このコンテンツを視聴者のために手動で読み込むのは私たちの責任です。これを行うには、まず、クリックされたリンクの

href 属性の値を取得します。また、#content を URL の末尾に追加します。これが実際にロードしたいコンテンツであるためです。

jQuery の

hide() メソッドを使用して、#content 部分を非表示にします。このセクションには現在、ユーザーが退出しようとしているページのマークアップが含まれているため、このセクションを非表示にします。 hide() このメソッドは、最初のパラメータとして文字列または数値を受け取ります。この値は、選択した要素を非表示にするのにかかる時間を決定します。 「高速」に設定すると、200 ミリ秒以内にコンテンツが非表示になります。

hide() このメソッドは、選択した要素の幅、高さ、不透明度が 0 になるまでアニメーション化します。ゼロに達すると、display プロパティは none に設定されます。

2 番目のパラメーターはコールバック関数で、非表示アニメーションが完了した後にトリガーされます。コールバック関数で

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 中国語 Web サイトの他の関連記事を参照してください。