重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS3结合jQuery实现动画效果及回调函数的实例

写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部。

创新互联电话联系:028-86922220,为您提供成都网站建设网页设计及定制高端网站建设服务,创新互联网页制作领域10多年,包括塔吊租赁等多个行业拥有丰富的网站推广经验,选择创新互联,为企业锦上添花!

他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了。

听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果。仅供参考:

效果图:

CSS3结合jQuery实现动画效果及回调函数的实例

代码如下:



	
		
		欢迎动画
		
	
	
		

欢迎xxx登录,祝您购物愉快

这里主要用到了css3中的 animate 动画属性,结合 jQuery 实现动画执行的时间和方向,最后设置回调函数使提示信息回到初始位置即可。

以上这篇CSS3结合jQuery实现动画效果及回调函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。


网站栏目:CSS3结合jQuery实现动画效果及回调函数的实例
标题链接:http://cqcxhl.com/article/igocgs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP