jqueryマスクは3秒後に消えます-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryマスクは3秒後に消えます

王林

May 25, 2023 am 10:51 AM

Web サイト開発では、さまざまなインタラクティブ効果を実現するために JavaScript ライブラリ jQuery がよく使用されます。その中で、マスクレイヤーのインタラクティブ効果も非常に一般的です。マスクレイヤーは、ページを覆う半透明のマスクレイヤーで、ページを操作する前にユーザーに現在のレイヤーのインタラクションタスクの処理を強制します。具体的な実装プロセスでは、jQuery の fadeOut() メソッドを使用して、マスクレイヤが 3 秒後に自動的に消える効果を実現できます。

まず、fadeOut() メソッドについて学びましょう。このメソッドは、一致する要素とその兄弟すべてを徐々にフェードアウトし、最終的には消えるために使用されます。このメソッドは、要素の不透明度を変更することで機能します。 jQuery の fadeOut() メソッドにはいくつかのオプションパラメータがあり、その中で最も一般的に使用されるのは速度設定パラメータで、エフェクト時間のミリ秒数を定義するために使用されます。速度パラメータ値が「遅い」、「速い」、または特定のミリ秒値の場合、フェードアウトエフェクトの実行速度は異なります。これに加えて、jQuery は、さまざまなイージング効果を実現するイージングや、フェードアウトの完了後にコールバック関数を実行する完全なパラメーターなど、その他の追加パラメーターも提供します。

ここで、マスクレイヤーの HTML を含め、3 秒後に自動的に消えるマスクレイヤーを実装する jQuery コードを作成してみましょう。まず、テスト用のマスクレイヤーとコンテンツ領域を含む HTML ファイルを定義する必要があります。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 三秒后遮罩消失</title>

<style type="text/css">
    #mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.5);
        text-align: center;
        z-index: 9999;
        display: none;
    }

    #content{
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-100px;
        background:#ddd;
        color:#333;
        width:200px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
</style>
</head>

<body>
    <div id="mask">
        <div id="content">这是一个测试内容区域</div>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">

</script>

</html>

ログイン後にコピー

head タグで、2 つの CSS スタイル #mask と #content を定義し、それぞれマスクレイヤーをオンにし、テスト用のコンテンツ領域のスタイルを定義します。このうち #mask は位置を絶対に設定し、全画面表示にして最上位にレイアウトします。背景はrgba(0,0,0,.5)の半透明の黒です。 text-align 属性は、コンテンツ領域を中央に配置します。 z-index 属性は、Web ページの他の要素よりも高いマスクレイヤーのレベルを設定します。表示属性はマスクレイヤーのデフォルト状態を設定します。初期状態は表示されず、jQuery スクリプトが表示を制御するのを待ちます。 #content スタイルは、マスクレイヤーの中央のテストコンテンツ領域を占めるように設計されており、純粋なスタイル定義であり、JavaScript の実装には影響しません。

ここで、マスクレイヤーの表示と非表示を制御する jQuery スクリプトを作成する必要があります。 jQuery の setTimeout() メソッドを使用して、3 秒後にマスクレイヤーの fadeOut() メソッドをトリガーし、マスクが消える効果を実現します。コードは次のとおりです:

<script type="text/javascript">
$(document).ready(function(){
    $("#mask").fadeIn();    //控制遮罩层的显示
    setTimeout(function(){
        $("#mask").fadeOut();   //控制遮罩层的隐藏
    },3000);        
});
</script>

ログイン後にコピー

上記の jQuery コードは明確で簡潔です。まず、ドキュメントの準備ができた後、fadeIn() メソッドを使用してマスクレイヤーの表示を制御します。 setTimeout() メソッドは関数と時間パラメーターを受け取り、関数は指定された時間の経過後に実行されます。ここでは時間を 3 秒に設定し、時間が経過したら fadeOut() メソッドを実行してマスクレイヤを徐々にフェードアウトし、最終的に非表示にします。 fadeOut() メソッドは速度パラメーターを使用してフェードアウト効果の持続時間を定義できますが、この場合は詳しく説明する必要はありません。

上記のコードを完了した後、ブラウザでこのコードを実行すると、ページにマスクレイヤーが表示され、3 秒後に自動的に消えることがわかります。コードを任意の HTML ページに埋め込んで、ページがアンロードされた後にマスクレイヤーを自動的に非表示にすることができます。

要約すると、jQuery はさまざまな Web ページ効果を迅速かつ簡単に実現するのに役立ちます。一般的なインタラクティブ効果として、マスクレイヤーは Web サイト開発で特によく使用されます。この記事では、jQuery の fadeOut() メソッドと setTimeout() メソッドを使用して、マスクレイヤが 3 秒後に自動的に消える効果を実現します。これは、便利で簡単な実装方法を提供するだけでなく、Web サイト開発における jQuery の柔軟な使用法を示しています。

以上がjqueryマスクは3秒後に消えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7716

Java チュートリアル

1641

CakePHP チュートリアル

1396

Laravel チュートリアル

1289

PHP チュートリアル

1232

Related knowledge

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

ReactとFrontend：インタラクティブエクスペリエンスの構築 Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応コンポーネント：HTMLで再利用可能な要素を作成します Apr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1）コンポーネントの定義：関数またはクラスを使用して、反応要素を返します。 2）レンダリングコンポーネント：Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3）マルチプレックスコンポーネント：データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

TypeScriptをReactで使用することの利点は何ですか？ Mar 27, 2025 pm 05:43 PM

タイプスクリプトは、タイプの安全性を提供し、コードの品質を改善し、IDEサポートを改善し、エラーを減らし、保守性を向上させることにより、反応開発を促進します。

複雑な州管理にusereducerを使用するにはどうすればよいですか？ Mar 26, 2025 pm 06:29 PM

この記事では、Reactで複雑な状態管理にusereducerを使用して、useStateよりもその利点と副作用のために使用するEffectと統合する方法を詳述しています。

反応とフロントエンドスタック：ツールとテクノロジー Apr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

Reactのエコシステム：ライブラリ、ツール、およびベストプラクティス Apr 18, 2025 am 12:23 AM

Reactエコシステムには、状態管理ライブラリ（Reduxなど）、ルーティングライブラリ（Reactrouterなど）、UIコンポーネントライブラリ（材料-UIなど）、テストツール（JESTなど）、およびビルディングツール（Webpackなど）が含まれます。これらのツールは、開発者がアプリケーションを効率的に開発および維持し、コードの品質と開発効率を向上させるのを支援するために協力します。

React vs.バックエンドフレームワーク：比較 Apr 13, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

See all articles