Quels sont les effets d'animation dans jQuery ?-js tutoriel-php.cn

Quels sont les effets d'animation dans jQuery ?

清浅

Libérer： 2018-11-29 09:11:51

original

6417 Les gens l'ont consulté

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.

Quels sont les effets danimation dans jQuery ?

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

Copier après la connexion

slideUp()

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

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

Copier après la connexion

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!"）

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Avant d'ajouter l'effet

Image 11.jpg

Après avoir ajouté l'effet

Quels sont les effets danimation 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!