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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现简单评论功能
Aug 19 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
深入解析php中的foreach函数
2013/08/31 PHP
php画图实例
2014/11/05 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
中间件的定义
2016/08/09 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript