CSS3结合jQuery实现动画效果及回调函数
来源:互联网 发布:源码小偷 编辑:程序博客网 时间:2024/05/18 02:21
写期末项目中,朋友提出的 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 实现动画执行的时间和方向,最后设置回调函数使提示信息回到初始位置即可。
阅读全文
0 0
- CSS3结合jQuery实现动画效果及回调函数
- Jquery学习--效果、回调函数
- jquery中的动画效果方法animate()及其回调函数的使用
- javascript判断css3动画结束 css3动画结束的回调函数
- 4.2.5: jQuery动画之动画回调函数
- js中的函数封装,回调函数实现的简单动画效果
- jquery之回调函数及jsonp
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- Jquery使用animate实现css3的transform动画效果
- Jquery实现自己的回调函数
- css3 动画 结合jquery 学习备忘
- CSS3实现闪烁动画效果
- CSS3的动画效果实现
- css3实现下划线动画效果
- java中jar包出错
- 使用FormData实现异步上传文件
- EqualsBuilder和HashCodeBuilder
- 5分钟让你明白“软链接”和“硬链接”的区别
- CCPC 2017 哈尔滨 F题
- CSS3结合jQuery实现动画效果及回调函数
- day26—OracleSQL 中建表、约束、库和表的设计原则
- oAuth2.0协议
- Inventory文件
- Android String字符串去除指定两个字符串范围内的字符
- spring boot shiro @RequiresPermissions 注解无效
- jsp 自定义标签---标签文件
- 深度学习笔记 (二) 在TensorFlow上训练一个多层卷积神经网络
- MySQL的InnoDB的幻读问题