Maison > Article > interface Web > Comment implémenter des effets d'animation et des fonctions de rappel

Comment implémenter des effets d'animation et des fonctions de rappel

亚连original: 2018-06-15 11:37:152535parcourir

Maintenant, je vais partager avec vous un exemple de CSS3 combiné avec jQuery pour obtenir des effets d'animation et des fonctions de rappel. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans le projet final, un ami a proposé une idée, un effet spécial pour accueillir l'utilisateur lorsque celui-ci se connecte avec succès, c'est-à-dire que le message de bienvenue de l'utilisateur monte du bas vers la page, puis revient à le bas.

Le problème qu'il a rencontré est le suivant : Un message d'invite peut sortir du bas, mais après sa sortie, 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 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<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>
	</head>
	<body>
		<p>
			<p>欢迎xxx登录，祝您购物愉快</p>
		</p>
		
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});
			
			 	});
			}
		</script>
	</body>
</html>

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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus