CSS3结合jQuery实现动画效果及回调函数的实例

2019-11-19 14:38:23

字体：大中小

来源：转载

供稿：网友

写期末项目中，朋友提出的 idea ，当用户登录成功时欢迎用户的特效，即欢迎用户信息从底部上升到页面中，之后再退回底部。

他遇到的问题是：从底部能出来提示信息，但是出来之后就下不去了。

听过后，考虑之，想到用回调函数来解决这个Bug，然后模拟登录成功时进入主页（即刷新页面），弹出欢迎信息并消失，写了一个类似这样的动画效果。仅供参考：

效果图：

代码如下：

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title>欢迎动画</title>		<style>		 	*{margin:0;padding:0;}		 	div {		 		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>		<div>			<p>欢迎xxx登录，祝您购物愉快</p>		</div>				<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>

这里主要用到了css3中的 animate 动画属性，结合 jQuery 实现动画执行的时间和方向，最后设置回调函数使提示信息回到初始位置即可。

以上这篇CSS3结合jQuery实现动画效果及回调函数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：全面介绍vue 全家桶和项目实例

下一篇：使用jQuery 操作table 完成单元格合并的实例