web-dev-qa-db-fra.com

JQuery Différence entre hide () et fadeOut (), show () et fadeIn ()

Je suis nouveau sur jQuery. Actuellement, je travaille avec jQuery dans mon application mobile multiplateforme. J'ai besoin de cacher et d'afficher certains de mes contenus de page sur les conditions respectives. J'ai trouvé deux méthodes qui fonctionnent bien pour moi.

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

les deux lignes fonctionnent bien pour moi pour masquer mes vues, également lorsque je dois montrer mes vues en suivant les deux lignes fonctionnent bien pour moi

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

Je veux juste savoir la différence technique entre eux que lorsque j'ai besoin d'utiliser quelle fonction pour un besoin spécifique.

jqueryhideshowfadeinfadeout
14
Salman Nazir

  • .fadeIn(duration) et .fadeOut(duration) animent l'opacité dans une durée. Pendant l'animation de la décoloration la place de l'élément est entièrement occupée cependant à la fin de .fadeOut() la place sera supprimée immédiatement.

  • .show(duration) et .hide(duration) anime la taille de l'élément (également l'opacité) à 100% et 0% et la place des éléments est également animée pendant cette durée.

  • Similarité: L'élément disparaîtrait immédiatement dans les deux .hide() et .fadeOut() lorsque durée = 0 et apparaîtrait immédiatement dans .show() et .fadeIn() lorsque duration = 0.

Exécutez cet extrait de code pour vérifier la différence et les similitudes:

$(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 () et hide () , fadeOut () fonctionnent de manière similaire.

Le tableau suivant montre la différence entre eux sur la base de la propriété css.

                     | Opacity | Display | Width/Height |

Pour show (), hide ()

                     |Changes  |Changes  |Changes       |

Pour fadeIn (), fadeOut ()

                     |Changes  |Changes  |Doesn't change|

Voici un code de démonstration que vous pouvez vérifier pour une meilleure compréhension:

[~ # ~] 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

Un point important qui peut être ajouté à ces différences d'actions est que hide ()/show () a enregistré la valeur d'affichage initiale. Si votre élément avait un affichage: en ligne avant été affiché: aucun à cause d'un hide () alors il devrait être à nouveau en ligne.

C'est dans le doc :)

Les éléments correspondants seront immédiatement masqués, sans animation. Cela équivaut à peu près à appeler .css ("display", "none"), sauf que la valeur de la propriété display est enregistrée dans le cache de données de jQuery afin que l'affichage puisse plus tard être restauré à sa valeur initiale. Si un élément a une valeur d'affichage en ligne et est masqué puis affiché, il sera de nouveau affiché en ligne.

0
Paul Leclerc