C3+jQuery crée des effets d'animation et des fonctions de rappel

Cette fois, je vais vous présenter C3+jQuery pour créer des effets d'animation et des fonctions de rappel Quelles sont les précautions pour C3+jQuery pour créer des effets d'animation et des fonctions de rappel. Jetons un coup d'œil à des cas pratiques.

Dans le projet final, j'ai écrit une idée proposée par un ami. Lorsque l'utilisateur se connecte avec succès, il y a un effet spécial pour accueillir l'utilisateur, c'est-à-dire les informations de bienvenue de l'utilisateur. monte du bas vers la page, puis revient vers le bas.

Le problème qu'il a rencontré est le suivant : Un message d'invite peut sortir du bas, mais une fois sorti, il ne peut pas descendre.

Après avoir entendu cela, j'y ai réfléchi et j'ai pensé à utiliser une fonction de rappel pour résoudre ce bug. Ensuite, j'ai simulé l'entrée sur la page d'accueil (c'est-à-dire l'actualisation de la page) lorsque la connexion est réussie, le message de bienvenue apparaît et. disparaît et j'ai écrit un effet d'animation similaire à celui-ci. Pour référence seulement :

Rendu :

Le code est le suivant :

nbsp;html>

	
		<meta>
		<title>欢迎动画</title>
		<style>
		 	*{margin:0;padding:0;}
		 	p {
		 		margin:0 auto;
		 		width:100%;
		 		height:700px;
		 		overflow:hidden;
		 		position:relative;
		 	}			
		 	p {
				width:220px;
				height:40px;
				line-height:40px;
				text-align:center;
				display:block;color:#900;
				background:#ccc;
				position:absolute;
				bottom:-40px;
				left:500px;
		 	}
		</style>
	
	
		<p>
			</p><p>欢迎xxx登录，祝您购物愉快</p>
				
		<script></script>
		<script>
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});			
			 	});
			}
		</script>
	

Ici, nous utilisons principalement la propriété d'animation animate en CSS3, combinée avec jQuery pour réaliser l'heure et la direction de l'exécution de l'animation, et enfin définir la fonction de rappel pour renvoyer l'invite informations à la position initiale.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

HTML+CSS+jQuery pour implémenter une image publicitaire carrousel

JS pour implémenter la barre de navigation de positionnement

Comment créer un effet de pagination avec jquery

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!