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:086353parcourir
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
Après avoir ajouté l'effet
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!