CSS3结合jQuery实现动画效果及回调函数的实例
写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部。
他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了。
听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果。仅供参考:
效果图:
代码如下:
<!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实现动画效果及回调函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
如何使用CSS3+JQuery实现悬浮墙式菜单
前言 大家好,今天我要教你如何创建一个有用的悬停式用户界面,使用jQuery,CSS3,HTML5和@ font – face.你可能会问我,为什么是一个基于悬停的用户界面?好吧,由于现在很流行的基础触摸的web站点可以运行在移动设备上,我认为我们可以让那些基于桌面浏览器的人们使用站点更加简单. 什么是悬停界面? 悬停界面就是只需要做少量的工作就可以浏览更多的内容.比起传统的基于页面的点击,我们需要改变一些想法和设计结构,可以让用户知道怎样通过基于悬停墙来浏览更多的内容. 如果你浏览一些最流行的
-
基于jQuery和CSS3实现APPLE TV海报视差效果
用CSS和jQuery来实现它,尽量看起来和原效果一样. 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有基本的了解. 废话不多说,开始第一部分. HTML页面 我们的页面结构像下面这样: <div class="poster"> <div class="shine"></div> <div class="layer-1"&
-
jquery+css3实现熊猫tv导航代码分享
实现原理 请看以下源代码 <div class="ph-nav" data-pdt-block="pheader-n"> <div class="ph-nav_shadow" style="left: 0px; width: 62px;"></div> <ul> <li class="ph-nav_item ph-nav_item--current"&g
-
CSS3 media queries结合jQuery实现响应式导航
目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个. 所以我选择了将导航绝对定位. 2.默认导航列表是出现的,当屏幕宽度小于700px时它隐藏,并且设置position,当屏幕宽度大于700px时,它出现.或者,默认导航列表是隐藏的,当屏幕宽度大于700px时它出现在右侧,小于时隐
-
jquery+css3问卷答题卡翻页动画效果示例
CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
-
如何使用CSS3和JQuery easing 插件制作绚丽菜单
前言 在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们将使用jQuery Easing Plugin插件和一些由tibchris.提供的漂亮图片 标记 在HTML的结构中,我们将使用一个无序的列表,其中每个菜单项将包含的主要链接和一个子菜单的div元素: <ul id="sdt_menu" class="sdt_menu
-
jQuery+CSS3实现点赞功能
效果图: 图(1) 初始图 图(2) 点击后 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m
-
CSS3结合jQuery实现动画效果及回调函数的实例
写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部. 他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了. 听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果.仅供参考: 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8
-
jQuery的load()方法及其回调函数用法实例
本文实例讲述了jQuery的load()方法及其回调函数用法.分享给大家供大家参考.具体如下: 下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(fun
-
原生js仿jquery animate动画效果
jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40
-
Css3制作变形与动画效果
下面通过图文并茂的方式给大家展示下css3制作变形与动画效果 css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 下面介绍:过渡transition. 一.例子 先通过一个例子感性认识一下transition的动画效果. 鼠标放上去,div宽度从100px增大到200px. <style type="text/css"> div{ width: 100px; height: 100px; background-
-
jQuery实现动画效果circle实例
本文实例讲述了jQuery实现动画效果circle的方法.分享给大家供大家参考.具体如下: 这款jQuery实现动画效果circle,Google+的圈子特效做的很不错,这里模仿下,时间有限,还有一个动画累积的问题没有解决.当然,是基于 jQuery的,纯JS 还没有这个能力呢.感兴趣的朋友可以加以完善试试. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
-
jquery带动画效果幻灯片特效代码
本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换
-
jQuery实现动画效果的简单实例
一.需求原因目前jQuery已经是一个比较成熟的框架了,而且基于他的插件也有上百种,本例我手动用jQuery实现一个动画效果的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv
-
对Python3之进程池与回调函数的实例详解
进程池 代码演示 方式一 from multiprocessing import Pool def deal_task(n): n -= 1 return n if __name__ == '__main__': n = 10 p = Pool(4) for i in range(4): res = p.apply(deal_task, args=(n,)) #调用apply是一个串行的效果,任务会被进程一个一个的处理,直接得到结果 #前提是执行的任务必须要有返回值 print(res) 方式二
-
javascript判断css3动画结束 css3动画结束的回调函数
css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 复制代码 代码如下: var transitions = { 'transition':'transitionend',
-
jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就
随机推荐
- Python进阶篇之字典操作总结
- SQL中Merge用法详解
- jquery模拟SELECT下拉框取值效果
- 详解vue组件化开发-vuex状态管理库
- perl中srand()与time的函数使用方法介绍
- 浅析Repeater控件的使用 (原样导出和动态显示/隐藏Repeater中的列)
- asp.net datalist绑定数据后可以上移下移实现示例
- Android实现淘宝选中商品尺寸的按钮组实例
- Android实现简单底部导航栏 Android仿微信滑动切换效果
- PHP eval函数使用介绍
- 简单实现android短信发送器
- JS批量操作CSS属性详细解析
- 基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
- SQL Server误区30日谈 第5天 AWE在64位SQL SERVER中必须开启
- JQuery each打印JS对象的方法
- Python for Informatics 第11章之正则表达式(四)
- MyBatis中SqlSession实现增删改查案例
- django使用html模板减少代码代码解析
- 解决vue build打包之后首页白屏的问题
- vue基础之使用get、post、jsonp实现交互功能示例