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


Posted in jQuery onDecember 27, 2017

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

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

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

效果图:

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

代码如下:

<!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实现动画效果及回调函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jQuery实现瀑布流页面
Apr 11 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery实现上传图片功能
Jun 29 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
pandas计数 value_counts()的使用
2019/06/24 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
电子工程专业毕业生求职信
2014/03/14 职场文书
师范类求职信
2014/06/21 职场文书
2014年销售部工作总结
2014/12/01 职场文书
股权转让协议书
2014/12/07 职场文书
幽灵公主观后感
2015/06/09 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书