ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryで要素をゆっくり消す方法

jqueryで要素をゆっくり消す方法

WBOY
WBOYオリジナル
2022-03-18 15:01:512413ブラウズ

jquery では、fadeOut() メソッドを使用して、要素をゆっくりと消すことができます。このメソッドは、選択した要素の不透明度を徐々に変更することで、要素を徐々に非表示にすることができます。設定パラメーターは、要素が消える速度 構文 「要素オブジェクト.fadeOut(速度、各時点での要素の速度、実行後に実行されるパラメータ)」です。

jqueryで要素をゆっくり消す方法

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jqueryで要素をゆっくり消す方法

jqueryでは、pictureオブジェクトを取得し、fadeOut()メソッドを使って、ゆっくりと画像を消していきます。

test.html という名前の新しい HTML ファイルを作成して、jquery がどのように画像をゆっくりと消すかを説明します。 pタグ内にimgタグを使って画像を作成し、jqueryメソッドを使って画像をゆっくり消していきます。 img タグの id 属性を mypic に設定します。これは主に、以下の id を通じて img オブジェクトを取得するために使用されます。

buttonタグを使用して「絵がゆっくり消える」という名前のボタンを作成します。 onclick クリック イベントをボタン ボタンにバインドし、ボタンがクリックされると、himg() 関数が実行されます。 hisg() 関数を作成し、関数内で id(mypic) を通じて画像オブジェクトを取得し、fadeOut() メソッドを使用してそれを低速に設定し、画像がゆっくりと消えるようにします。

jqueryで要素をゆっくり消す方法

#test.html ファイルをブラウザで開き、ボタンをクリックして効果を確認します。

jqueryで要素をゆっくり消す方法

jqueryで要素をゆっくり消す方法

概要:

1. test.html ファイルを作成します。

2. ファイルの p タグ内で、img タグを使用して画像を作成し、js 関数の実行をトリガーするボタン button を作成します。

3. jsタグ内に関数を作成し、その関数内で画像オブジェクトを取得し、fadeOut()メソッドでslowに設定し、画像がゆっくり消えるように設定します。

注意事項

fadeOut() メソッドのパラメータは遅い場合がありますが、画像が消えるまでの秒数 (ミリ秒単位) を設定することもできます。

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjqueryで要素をゆっくり消す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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