Maison > Article > interface Web > Quels sont les effets d’animation dans jQuery ?

Quels sont les effets d’animation dans jQuery ?

清浅original: 2018-11-28 14:48:086289parcourir

Les effets d'animation dans jQuery incluent : slideDown, slideUp, etc. pour obtenir l'effet de glissement ; fadeIn, fadeToggle, etc. pour obtenir l'effet de fondu d'entrée et de sortie

jQuery a de nombreuses façons de nous aider à y parvenir sur la page. Il existe de nombreux effets d'animation intéressants et amusants, et le code du programme simple est plus pratique et concis que l'utilisation du code JavaScript original pour obtenir l'effet. Aujourd'hui, je vais présenter plusieurs animations jQuery. méthodes de fonctionnement en détail dans l'article. J'espère que cela sera utile à l'apprentissage de chacun.

[Cours recommandés : jQuery Animation]

Effet coulissant

slideDown()

peut augmenter de bas en haut grâce aux changements de hauteur et afficher le contenu caché de manière coulissante

$(".btn2").click(function(){
$("p").slideDown();
});

slideUp()

peut être réduit de haut en bas grâce aux changements de hauteur

$("p").slideUp("slow");

slideToggle([speed],[easing],[fn])

Basculez la visibilité de tous les éléments correspondants via des changements de hauteur

Exemple : faites glisser rapidement le paragraphe vers le haut ou vers le bas, puis une boîte de dialogue apparaîtra

$("p").slideToggle("fast",function(){
alert("hello world!"）

Fondu entrant et sortant

fadeIn()

Obtenez l'effet de fondu entrant de tous les éléments correspondants en définissant le changement d'opacité

Exemple : utilisez 200 millisecondes pour faire apparaître rapidement un paragraphe en fondu , puis faites apparaître une boîte de dialogue

("p").fadeIn("fast",function(){
alert("hello world!");
});

fadeOut()

Obtenez l'effet de fondu de tous les éléments correspondants en définissant le changement d'opacité

Exemple : rapidement faire disparaître le paragraphe en 200 millisecondes, puis une boîte de dialogue apparaît

$("p").fadeOut("fast",function(){
alert("hello world!");
});

fadeTo()

Ajuster l'opacité de tous les éléments correspondants à l'opacité spécifiée de manière progressive

Ajustez rapidement l'opacité en 200 millisecondes. La transparence du paragraphe est ajustée à 0,25, soit environ 1/4 de la visibilité, puis une boîte de dialogue apparaît

$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});

fadeToggle()

Active le fondu d'entrée et de sortie de tous les éléments correspondants en modifiant l'opacité Effet de fondu de sortie

Exemple : fondez rapidement un paragraphe en 200 millisecondes, puis une boîte de dialogue apparaît

$("p").fadeToggle("fast",function(){
alert("hello world!");
});

Cas : Lorsque l'on clique sur le bouton avec la souris, le contenu caché s'affiche et disparaît en fondu Disparaître

<body>
       <div id="box">
       <div id="btn">点击这里，显示或隐藏</div>
	<div id="content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架)</div>
	</div>
	<script src="jquery/jquery-1.12.4.js"></script>
	<script type="text/javascript">
	     $(function(){
	     	$("#btn").click(function(){
	     		$("#content").slideToggle("slow");
	     		$("#content").fadeToggle("slow");
	     	});
	     });
</script>

Avant d'ajouter l'effet

Image 11.jpg

Après avoir ajouté l'effet

Quels sont les effets d’animation dans jQuery ?

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'à travers cet article, tout le monde pourra avoir une certaine compréhension des effets d'animation de jQuery et comment créer les effets d'animation que nous souhaitons.

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：Quels sont les objets intégrés en JavaScript ?Article suivant：Quels sont les objets intégrés en JavaScript ?

Quels sont les effets d’animation dans jQuery ?

Articles Liés