jQueryでフェードインとフェードアウト効果を実現する方法

清浅
リリース: 2019-02-12 14:26:01
オリジナル
3534 人が閲覧しました

jQuery には、fadeIn()、fadeOut()、fadeToggle()、fadeTo() という 4 つのメソッドがあります。これらの 4 つのメソッドを通じて、フェードインとフェードアウトの効果を実現できます。今日は、jQuery を使用してフェードインおよびフェードアウト効果を実現する方法について共有したいと思います。


## 皆さんの参考になれば幸いです。 jQueryでフェードインとフェードアウト効果を実現する方法#[チュートリアルの推奨事項:

jQuery チュートリアル

]jQuery には、fadeIn()、fadeOut()、fadeToggle()、fadeTo() という 4 つのフェード メソッドがあります。 , このメソッドを使用してフェードインとフェードアウト効果を実現する方法は、主に

fadeIn()メソッド

の記事で詳しく紹介します。非表示の要素をフェードインするために使用されます。

speed: エフェクトの持続時間を示します。「遅い」、「速い」、またはカスタマイズされた時間値を指定できます。これはオプションのパラメータです。

callback: フェードイン効果の完了後に実行される関数の名前を示します。

fadeOut() メソッド

これは主に表示要素をフェードアウトするために使用され、そのパラメータ値は fadeIn の値と同じです。

fadeToggle() メソッド

このメソッドは、fadeIn() を切り替えることができます。 ) および fadeOut() メソッド

要素がフェードアウトしている場合、fadeToggle() は要素にフェードイン効果を追加します

要素がフェードインしている場合、fadeToggle() は要素にフェードイン効果を追加します要素へのフェードアウト効果

fadeTo() メソッド

fadeTo() メソッドにより、指定された不透明度 (0 から 1 までの値) へのグラデーションが可能になります。 速度関数とコールバック関数に加えて、fadeTo メソッドにはさらに、フェードイン効果とフェードアウト効果の不透明度を設定するために使用される追加の必須不透明度パラメーターがあります。

共有例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img  src="./images/22.jpg" id="img" alt="jQueryでフェードインとフェードアウト効果を実現する方法" >
</body>
</html>
ログイン後にコピー

レンダリング:


概要: 上記は内容全体です。この記事が、jQuery を使用してフェードインおよびフェードアウト効果を実現する方法を学ぶのに役立つことを願っています

jQueryでフェードインとフェードアウト効果を実現する方法

注: この記事は、

について参照しています。 jQuery のフェードインとフェードアウト jQuery チュートリアル マニュアルの セクション

以上がjQueryでフェードインとフェードアウト効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート