Cet article met en évidence les principales différences entre hide() et fadeOut(), show() et fadeIn() dans jQuery.
Avant de passer à la différence entre hide() et fadeOut(), show() et fadeIn() dans jQuery, examinez d'abord les bases de ces méthodes en lisant les guides suivants :
- Méthode fadeIn() de jQuery
- Méthode fadeOut() de jQuery
- Méthode JavaScript JQuery Hide() | Expliqué
- Méthode JQuery Show() | Expliqué
Tout d’abord, voyez la différence entre les méthodes hide() et fadeOut() dans jQuery.
Différencier hide() et fadeOut() dans jQuery
La seule et unique différence principale entre le « cacher() ' et ' disparaître() ' La méthode est :
- Intervalle de temps : Le ' cacher() ' La méthode ' masque par défaut l'élément en changeant son opacité de 100 à 0 immédiatement sans consommer d'intervalle de temps, alors que la méthode ' disparaître() ' La méthode disparaît, c'est-à-dire masque l'élément progressivement en ' 400 ms ' qui est sa valeur par défaut.
Voyons la mise en œuvre pratique de la différence déclarée.
Regardez d’abord le code HTML suivant :
< centre >< identifiant h2 = 'H2' > Bienvenue sur Linuxhint ! h2 >
< bouton > Masquer l'élément bouton >
centre >
Dans les lignes de code ci-dessus :
- Le '
La balise ' ajuste l'alignement des éléments donnés au centre de la page Web. - Le ' ' La balise crée un sous-titre de niveau 2 avec un identifiant 'H2'.
- Le '
La balise ' insère un nouveau bouton.
Note: Le code HTML ci-dessus est suivi tout au long de ce guide.
Exemple : application de la méthode jQuery « hide() » avec la valeur « par défaut »
Cet exemple applique le « hide() » avec ses valeurs par défaut pour masquer un élément :
< scénario >$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#H2' ) . cacher ( ) ;
} ) ;
} ) ;
scénario >
Dans les lignes de code ci-dessus :
- Premièrement, le « prêt() ' La méthode est appliquée pour exécuter les fonctions spécifiées lorsque le document HTML actuel est chargé.
- Ensuite, le « Cliquez sur() ' La méthode est chargée d'exécuter la fonction liée en cliquant sur le bouton.
- Après cela, le « cacher() ' La méthode masque immédiatement l'élément de titre accédé dont l'identifiant est 'H2'.
Sortir
On peut voir que l'élément de titre se cache immédiatement après le clic sur le bouton.
Exemple : application de la méthode jQuery « fadeOut() » avec la valeur « par défaut »
Cet exemple utilise la méthode « fadeOut() » avec ses valeurs par défaut pour masquer progressivement l'élément donné en « 400 ms ».
Dans ce scénario, le contenu de l'élément « bouton » est modifié :
< bouton > disparaître ( Cacher Élément ) bouton >Implémentez maintenant la méthode « fadeOut() » de cette manière :
< scénario >$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#H2' ) . disparaître ( ) ;
} ) ;
} ) ;
scénario >
A cette époque, le « disparaître() 'La méthode est appliquée pour faire disparaître l'élément de titre accédé avec 400 ms, c'est-à-dire la valeur par défaut.
Sortir
Le résultat montre clairement que le clic sur le bouton donné masque progressivement l'élément de titre dans l'intervalle de temps par défaut, c'est-à-dire « 400 ms ».
Faire la différence entre show() et fadeIn() dans jQuery
Semblable aux méthodes « hide() » et « fadeOut() », la même différence existe entre les méthodes « show() » et « fadeIn() » :
- Intervalle de temps : Le ' montrer() ' La méthode affiche par défaut l'élément masqué en changeant immédiatement son opacité de 0 à 100, alors que la méthode ' fonduIn() ' La méthode affiche l'élément caché progressivement en ' 400 ms ' qui est sa valeur par défaut.
Exemple : application de la méthode jQuery « show() » avec la valeur « par défaut »
Cet exemple applique le « show() » avec ses valeurs par défaut pour afficher l'élément masqué.
Regardez d’abord le bloc de code HTML fourni :
< centre >< bouton > Afficher l'élément bouton >
< identifiant h2 = 'H2' style = 'affichage : aucun' > Bienvenue sur Linuxhint ! h2 >
centre >
Selon ce scénario, l'élément de titre donné est masqué à l'aide du ' affichage : aucun ' propriété.
Maintenant, suivez le bloc de code donné pour comprendre l'implémentation pratique de la méthode « show() » :
< scénario >$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#H2' ) . montrer ( ) ;
} ) ;
} ) ;
scénario >
Le bloc de code ci-dessus utilise le ' montrer() ' pour afficher immédiatement l'élément caché ajouté.
Sortir
On peut voir que le clic sur le bouton affiche immédiatement l'élément de titre masqué.
Exemple : application de la méthode jQuery « fadeIn() » avec la valeur « par défaut »
Cet exemple montre l'élément masqué en utilisant la méthode 'fadeIn()' avec la valeur par défaut ' 400 ms » :
Le texte de l'élément bouton est modifié en fonction du scénario donné :
< bouton > fondu ( Montrer Élément ) bouton >Maintenant, appliquez le « fonduIn() ' en utilisant le bloc de code suivant :
< scénario >$ ( document ) . prêt ( fonction ( ) {
$ ( 'bouton' ) . Cliquez sur ( fonction ( ) {
$ ( '#H2' ) . fondu ( ) ;
} ) ;
} ) ;
scénario >
Dans ce bloc de code, le « fonduIn() 'La méthode est utilisée pour afficher l'élément caché qui correspond à l'identifiant 'H2' en 400 ms, c'est-à-dire la valeur par défaut.
Sortir
On peut observer que le clic sur le bouton donné affiche l'élément caché progressivement dans l'intervalle de temps par défaut, c'est-à-dire « 400 ms ».
Conclusion
Dans jQuery, la seule différence clé entre le cacher() et disparaître() , montrer() , et fonduIn() la méthode est ' Intervalle de temps ». Les méthodes « show() » et « hide() » exécutent leurs fonctionnalités immédiatement par défaut, tandis que les méthodes « fadeIn() » et « fadeOut() » exécutent leurs tâches dans l'intervalle de temps par défaut, c'est-à-dire « 400 ms ». Cet article explique pratiquement les principales différences entre hide() et fadeOut(), show() et fadeIn() dans jQuery.