recherche

Maison >interface Web >js tutoriel >Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery

Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery

云罗郡主
云罗郡主avant
2019-01-21 10:10:022772parcourir

Fondu entrant et sortant

Les animations des fonctions hide() et show() changent constamment de taille. En fait, cette approche est très déroutante, nous sommes donc. meilleur en ce moment Une bonne pratique consiste à effectuer des effets de fondu d'entrée et de sortie

Opération de fondu d'entrée : fadeIn(time, function(){})

Opération de fondu de sortie : fadeOut(event, function(){})

Définissez vous-même l'opération de fondu fadeTo(event, fadeout rate, function(){}), le taux de fondu ne dépasse pas 1

Fadeout opération

<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的动画函数</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//设置层淡出操作
$(myimg).fadeOut(5000,function(){
$(this).fadeIn(5000)
});
});
</script>
</head>
<body>
<div id="myDiv">
<img  src="images/gd.jpg" id="myimg"    style="max-width:90%"/ alt="Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery" >
</div>
</body>
</html>

Utilisez fadeTo() pour observer le problème de taux de fondu 

$(function(){
//设置淡出率
$(myimg).fadeTo(5000,0.3,function(){});
});

Implémentation deffets danimation de fondu dentrée et de sortie jQuery

Si défini sur 0, cela signifie un fondu complet, s'il est défini à 1, cela signifie qu'il n'y a pas de retrait unique.

Si vous connaissez déjà les opérations de fondu d'entrée et de sortie, vous pouvez implémenter une rangée de boutons

Utilisez le fondu d'entrée et de sortie pour implémenter la fonction du menu 

<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的动画函数</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//设置淡出率
$("img").each(function(){
$(this).on("mouseover",function(){
$(this).fadeOut(200,function(){
$(this).fadeIn(200);
});
});
});
});
</script>
</head>
<body>
<div id="myDiv">
<img  src="images/gd.jpg"     style="max-width:90%"/ alt="Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery" >
<img  src="images/gd.jpg"     style="max-width:90%"/ alt="Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery" >
<img  src="images/gd.jpg"     style="max-width:90%"/ alt="Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery" >
<img  src="images/gd.jpg"     style="max-width:90%"/ alt="Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery" >
<img  src="images/gd.jpg"     style="max-width:90%"/ alt="Implémentation d'effets d'animation de fondu d'entrée et de sortie jQuery" >
</div>
</body>
</html>

Implémentation deffets danimation de fondu dentrée et de sortie jQuery

Une fonction formée par les trois groupes de fonctions ci-dessus.

Ce qui précède est l'introduction complète à la mise en œuvre des effets d'animation de fondu d'entrée et de sortie jQuery. J'espère que vous pourrez gagner quelque chose. Pour plus de tutoriels vidéo jQuery, veuillez prêter attention. le site Web PHP chinois.


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：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Qu’est-ce que React ? A quoi ça sert ?Article suivant：Qu’est-ce que React ? A quoi ça sert ?

Articles Liés

Voir plus