写期末项目中，朋友提出的 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="https://www.jb51.net/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实现动画效果及回调函数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: