web-dev-qa-db-ja.com

JQuery hide（）とfadeOut（）、show（）とfadeIn（）の違い

私はjQueryを初めて使用します。現在、私はクロスプラットフォームモバイルアプリケーションの1つでjQueryを使用しています。それぞれの条件でページコンテンツの一部を非表示および表示する必要があります。私には次の2つの方法がうまくいきます。

 $( "#myControlId" ).fadeOut();
 $( "#myControlId" ).hide();

ビューを非表示にするために両方の線が正常に機能している

 $( "#myControlId" ).fadeIn();
 $( "#myControlId" ).show();

特定のニーズのためにどの機能を使用する必要があるかという、それらの間の技術的な違いを知りたいだけです。

jqueryhideshowfadeinfadeout
14
Salman Nazir

  • .fadeIn(duration)および.fadeOut(duration)は、デュレーション内の不透明度をアニメーション化します。フェードアニメーション中要素の場所は完全に占有されていますただし、.fadeOut()の最後に、場所はすぐに削除されます。

  • .show(duration)と.hide(duration)は、要素のサイズ（不透明度も）を100％と0％にアニメーション化し、その期間に要素の場所もアニメーション化にアニメーション化します。

  • Similarity：要素は、duration = 0の場合、.hide()と.fadeOut()の両方ですぐに消え、.show()と.fadeIn() duration = 0の場合。

このスニペットを実行して、相違点と類似点を確認します。

$(document).ready(function(){
  $("#fadeOut1000").click(function(){
    $("#rectangle").stop().fadeOut(1000);
  })
  
  $("#fadeOut0").click(function(){
    $("#rectangle").stop().fadeOut(0);
  })
  
  $("#hide1000").click(function(){
    $("#rectangle").stop().hide(1000);
  })
  
  $("#hide0").click(function(){
    $("#rectangle").stop().hide(0);
  })   
  
  $("#fadeIn1000").click(function(){
    $("#rectangle").stop().fadeIn(1000);
  })
  
  $("#fadeIn0").click(function(){
    $("#rectangle").stop().fadeIn(0);
  })
  
  $("#show1000").click(function(){
    $("#rectangle").stop().show(1000);
  })
  
  $("#show0").click(function(){
    $("#rectangle").stop().show(0);
  })     

})
#placeholder{
    width:300px;
    height:100px;
    border:0px solid #666666;
    margin:auto;
    margin-top:10px;
    }
#rectangle{
    width:300px;
    height:100px;
    background:#ff0000;
    }
a{
    display:inline-block;
    margin:5px;
    border-radius:5px;
    border:1px solid #aaaaaa;
    padding:5px;
    cursor:pointer;
    width:90px;
    font-size:9pt;
    font-family:tahoma;
   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
  <a id="fadeOut1000">fadeOut(1000)</a>
  <a id="fadeOut0">fadeOut(0)</a>
  <a id="hide1000">hide(1000)</a>
  <a id="hide0">hide(0)</a>
  <br>
  <a id="fadeIn1000">fadeIn(1000)</a>
  <a id="fadeIn0">fadeIn(0)</a>
  <a id="show1000">show(1000)</a>
  <a id="show0">show(0)</a>
  
  <div id="placeholder">
    <div id="rectangle"></div>
  </div>
</div>
27
Ali Sheikhpour

show（） 、 fadeIn（） および hide（） 、 fadeOut（） はどちらも同様に機能します。

次の表は、cssプロパティに基づくそれらの違いを示しています。

                     | Opacity | Display | Width/Height |

Show（）、hide（）の場合

                     |Changes  |Changes  |Changes       |

FadeIn（）、fadeOut（）の場合

                     |Changes  |Changes  |Doesn't change|

以下は、理解を深めるために確認できるデモコードです。

[〜＃〜] html [〜＃〜]

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>JQuery</title>
    <script src="../scripts/jquery-3.2.1.min.js"></script>
    <script src="../scripts/myscript.js"></script>
</head>
<body>
    <p>Hey</p>
    <button>Click me!</button>
    <p></p>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

[〜＃〜] script [〜＃〜]（myscript.js）

$(document).ready(function () {
    $('button').click(function () {
        $("#div1").show(10000);
        $("#div2").fadeIn(10000);
    });
});
9
Dark Matter

このアクションの違いに追加できる重要な点は、hide（）/ show（）が初期表示値を保存したことです。要素が以前にdisplay：inlineであった場合、hide（）のためにdisplay：noneであった場合、要素は再びインラインになります。

the doc にあります:)

一致した要素はアニメーションなしですぐに非表示になります。これは.css（ "display"、 "none"）を呼び出すのとほぼ同じですが、displayプロパティの値がjQueryのデータキャッシュに保存され、後で表示を初期値に復元できるようになります。要素の表示値がインラインで非表示になっている場合、要素は再びインラインで表示されます。

0
Paul Leclerc