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和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php自动加载的两种实现方法
2010/06/21 PHP
PHP之数组学习
2011/05/29 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
web.js.字符串与正则表达式操作
2017/05/13 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Python求导数的方法
2015/05/09 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python字符串下标与切片及使用方法
2020/02/13 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
super关键字的用法
2012/04/10 面试题
企业厂务公开实施方案
2014/03/26 职场文书
商场主管竞聘书
2014/03/31 职场文书
《春晓》教学反思
2014/04/20 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
《雷雨》教学反思
2016/02/20 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
python实现简单石头剪刀布游戏
2021/10/24 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS