Maison > interface Web > js tutoriel > le corps du texte

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

巴扎黑
Libérer: 2017-06-29 11:59:56
original
1531 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal