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

Je suis nouveau sur jQuery. Actuellement, je suis en train de travailler avec jQuery dans mon un de Croix-Plate-forme d'Applications Mobiles. J'ai besoin de masquer et d'afficher certains de mes Contenu de la Page sur les conditions respectives. J'ai trouvé deux méthodes suivantes qui fonctionnent très bien pour moi.

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

les deux lignes fonctionnent très bien pour moi de cacher mon point de vue, quand j'ai besoin de montrer mon point de vue suivant les deux lignes de bien travailler pour moi

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

Veux juste savoir technique Différence entre eux que quand j'ai besoin d'utiliser la fonction de besoins spécifiques.

.show() / .hide(), .fadeIn() / .fadeOut()

InformationsquelleAutor Salman Nazir | 2015-11-29

.fadeIn(duration) et .fadeOut(duration) animer le pourcentage
de l'opacité dans une durée. Au cours de la décoloration de l'animation de la place de l'élément est entièrement occupé, cependant à la fin de .fadeOut() le lieu sera supprimé à la fois.
.show(duration) et .hide(duration) animer la taille de l'élément (également l'opacité) à 100% et de 0% et de la place des éléments est aussi animé que dans la durée.
Similitude: L'élément disparaîtrait immédiatement dans les deux .hide() et
.fadeOut() lorsque la durée=0 et apparaissent immédiatement dans .show() et .fadeIn() lorsque la durée=0.

Exécuter cet extrait de code pour vérifier les similitudes et des différences:

JS:

$(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);
  })     

})

CSS:

#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;
   }

HTML:

<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>

Merci Ali , la différence est maintenant clair pour moi .
Je ne veux pas faire une réponse pour cela, mais vous devriez aussi être conscient de certains changements, avec la nouvelle version de jQuery blog.jquery.com/2015/07/13/...

InformationsquelleAutor Ali Sheikhpour

Les deux show(), fadeIn() et hide(), fadeOut() fonctionnent de la même façon.

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

                     | Opacity | Display | Width/Height |

Pour show(), hide()

                     |Changes  |Changes  |Changes       |

Pour fadeIn(), fadeOut()

                     |Changes  |Changes  |Doesn't change|

Voici une démo de code que vous pouvez vérifier pour mieux comprendre:

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);
    });
});

InformationsquelleAutor Dark Matter

0

Un point important qui peut être ajouter à cela des actions de différences, c'est que hide()/afficher() enregistré le premier de la valeur d'affichage.
Si votre élément a un display:inline avant l'été display:none en raison d'un hide (), alors il devrait être en ligne à nouveau.

C'est dans le doc 🙂

Les éléments qui correspondent seront cachés immédiatement, sans animation. C'est à peu près équivalent à l'appel .css( "display", "none" ), sauf que la valeur de la propriété d'affichage est enregistré dans jQuery cache de données de sorte que l'affichage peut plus tard être restauré à sa valeur initiale. Si un élément a une valeur d'affichage en ligne et est caché puis le montre, il sera de nouveau affiché en ligne.

InformationsquelleAutor Paul Leclerc

Vous devez vous connecter pour publier un commentaire.