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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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
windows xp下安装pear
2006/12/02 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
Node.js编码规范
2014/07/14 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
有趣的python小程序分享
2017/12/05 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
小学生自我鉴定
2013/10/12 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
win10下go mod配置方式
2021/04/25 Golang