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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现动态操作table行
Nov 23 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 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery处理json对象
2014/11/03 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python isinstance函数介绍
2015/04/14 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
机器学习python实战之决策树
2017/11/01 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
大学四年学习的自我评价分享
2013/12/09 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
运动会加油口号
2014/06/07 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA