Maison >interface Web >js tutoriel >La différence entre hide et fadeOut dans jQuery La différence entre show et fadeIn

La différence entre hide et fadeOut dans jQuery La différence entre show et fadeIn

巴扎黑original: 2017-06-29 11:59:561542parcourir

Quelle est la différence entre les effets d'affichage de

masquer et de fadeOut ? show et fadeIn ont le même effet d'affichage ?

De nombreux amis rencontreront ce problème lors de l'apprentissage de jQuery, masquer et fadeOut peuvent tous deux avoir des paramètres :
$(selector).hide(speed,callback) ; 🎜>
$(selector).fadeOut(speed,callback);
Tout d'abord, on peut le savoir à partir du nom masquer signifie cacher et fadeOut signifie disparaître. Bien sûr, la différence spécifique ne peut pas être vue dans le nom, cela ne peut que refléter qu'ils sont différents. Mais lorsque nous définissons les paramètres vitesse pour qu'ils soient légèrement plus longs, nous pouvons voir la différence. Et les effets obtenus semblent être similaires, donc on pense à tort qu'ils sont les mêmes, mais ce n'est pas le cas.

Écrivons le code suivant :

<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/
javascript
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $("button.dl").click(function(){
    $("#p1").fadeOut(3000);
  });
});
$(document).ready(function(){
  $("button.dll").click(function(){
    $("#p2").hide(3000);
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button class="dl">点击这里，使红色矩形1淡出(fadeOut)</button>
<br><br>
<p id="p1" style="width:80px;height:80px;
background-color
:red;"></p>
<br><br>
<button  class="dll">点击这里，使红色矩形2隐藏(hide)</button>
<br><br>
<p id="p2" style="width:80px;height:80px;background-color:red;"></p>
</body>
</html>

Ok maintenant nous pouvons le tester et voir la différence en un coup d'œil.

Oui, masquerL'effet caché est un lent pliage et rétrécissement de bas en haut ou de bas à droite en haut à gauche , et fadeOut doit disparaître jusqu'à disparaît. D'accord, nous pouvons maintenant le tester et voir la différence en un coup d'œil.

De même, show et fadeIn sont également comme ceci La différence est, veuillez changer le code et essayez-le vous-même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Découvrez l'utilisation de la méthode fadeOut() dans jQueryArticle suivant：Découvrez l'utilisation de la méthode fadeOut() dans jQuery

Articles Liés

Voir plus