jQueryでフェードインとフェードアウト効果を実現する方法-jsチュートリアル-php.cn

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

清浅

リリース： 2019-02-12 14:26:01

オリジナル

3578 人が閲覧しました

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でフェードインとフェードアウト効果を実現する方法