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轻松实现无缝轮播效果
Mar 22 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
twig模板常用语句实例小结
2016/02/04 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
django项目搭建与Session使用详解
2018/10/10 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python imread、newaxis用法详解
2019/11/04 Python
python中操作文件的模块的方法总结
2021/02/04 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
一道Delphi上机题
2012/06/04 面试题
产品开发计划书
2014/04/27 职场文书
生态养殖创业计划书
2014/05/06 职场文书
学校春季防火方案
2014/06/08 职场文书
护林防火标语
2014/06/27 职场文书
委托培训协议书
2014/11/17 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
人事专员岗位职责
2015/02/03 职场文书
团员个人年度总结
2015/02/26 职场文书
经营场所使用证明
2015/06/19 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL