CSS3结合jQuery实现动画效果和回调功能

在最终的项目中，朋友们提出的想法是欢迎用户成功登录时的一种特殊效果，即欢迎用户的信息从底部上升到页面，然后返回到底部。

他遇到的问题是，他可以从底部发出信息，但出来后就下不去了。

听完之后想到用回调函数来解决这个Bug，然后在登录成功的时候模拟进入主页(也就是刷新页面)，弹出欢迎消息消失，写了一个这样的动画效果。仅供参考：

渲染：

代码如下：

！doctype html townleta charset=' utf-8 '/title欢迎动画/title style * { margin 33600；划水：0；} div { margin:0 auto宽度：100%；高度：700 px；飞越：隐藏；位置：相对；} p { width:220px高度：40 px；线高：40 px；文本对齐：居中；显示：块；color: # 900背景# ccc位置：绝对；bottom :-40px；left:500px}/style/headsdydivp欢迎xxx登录，祝您购物愉快/p/div script type=' text/JavaScript ' src=' http : js/jquery-1 . 8 . 3 . min . js '/script script type=' text/JavaScript '/function entry $(function(){ show })；//动画函数show(){//获取p框的高度var p=$('p ')。高度()；$(function(){//animation function $(' p ')。animate ({'bottom' :p * 9}，3000，function(){//callback function $(' p ')。动画({'bottom' :-p}，});});}/script/body/html这里主要使用css3中的动画属性，使用jQuery实现动画执行的时间和方向。最后，设置一个回调函数，将提示信息返回到初始位置。

上面的CSS3结合jQuery实现动画效果和回调函数的例子就是边肖分享的全部内容。希望能给大家一个参考，支持我们。