当前位置：首页 - 正文

播放完一个动画怎么回调函数

发布网友发布时间：2022-05-14 20:05

我来回答

共2个回答

懂视网时间：2022-05-15 00:27

下面我就为大家分享一篇CSS3结合jQuery实现动画效果及回调函数的实例，具有很好的参考价值，希望对大家有所帮助。

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

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

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

效果图：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>欢迎动画</title>
		<style>
		 	*{margin:0;padding:0;}
		 	p {
		 		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>
		<p>
			<p>欢迎xxx登录，祝您购物愉快</p>
		</p>
		
		<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 实现动画执行的时间和方向，最后设置回调函数使提示信息回到初始位置即可。

上面是我整理给大家的，希望今后会对大家有帮助。

在Node中如何使用ES6语法（详细教程）

在vue脚手架中如何配置Sass

使用Nodejs连接mysql实现基本操作

在Angular4中如何实现HTML属性绑定

使用JS如何编写的九九乘法表

热心网友时间：2022-05-14 21:35

jQuery的动画函数.animte(属性, 执行时间, 动画方式, 回调函数) 使用回调函数，在动画函数结束后会被执行的函数 $("#bd_wrap").animate({backgroundPosition:'-1024px 0'},1000, function() { //回调函数内容 });

播放完一个动画怎么回调函数

如何在cocostudio 2.0 的帧动画播放完之后,回调函数

1. 创建文件，修改自定义类名称。点击根节点在属性栏中修改自定义类类名，如:MyClass 2. 加入UI控件, 修改回调方法。选中想要设置回调特性的控件，进入高级属性，修改回调方法和对应回调的名称。如：Touch方法，名称为onTouch 然后发布资源 3. 在C++中，创建一个自己的自定义类。这个类必须遵循如下要...

Unity3D 动画回调函数、动画事件、动画曲线详解

动画回调函数是Unity3D中的关键工具，它允许在动画播放的特定时间点执行自定义代码。通过Animator和Animation组件，开发者可以设置事件名称、时间和对应函数。例如，定义一个OnAnimationEvent函数以响应动画事件：在Animator组件中选择动画状态，设置Animation Events中的事件，定义相应函数。在Animation组件中选择...

Dotween使用详解

实战应用通过一个简单的示例脚本 DomoveSimpleScript，你可以看到如何使用 Transform对象进行路径动画。设置动画速度(Spd)、完成回调(F)和移动类型(moveType)，并定义单步回调(stepFunc)。在更新部分，动画会逐帧推进，直到达到预设时间 m_CheckTime 后重置。当动画结束时，会标记停止，清空点列表，并执行...

游戏开发前端必备知识--requestAnimationFrame()

3. 用法动画帧请求回调函数列表：每个 Document 都有一个动画帧请求回调函数列表，这个列表可以看作是由元组组成的集合。页面可见性 API 来源：Polyfill for requestAnimationFrame/cancelAnimationFrame 在浏览器初次加载时，执行以下代码：requestAnimationFrame采用系统时间间隔，以保持最佳的绘制效率。它不会...

浏览器渲染之回流重绘

window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行使用requestAnimationFrame替代setTimeout或setInterval来执行动画之类的视觉变化,避免轻易造成丢帧导致卡顿。注意:不...

jquery怎样设置才能做完上一步动画再执行下一步

picShow(1,2);} function picShow(last,next){ lastname='#'+("pic"+last);//需要消失的图片的选择器 nextname='#'+("pic"+next);//需要显示的图片的选择器 //$(lastname).hide(1000,function(){ //last<4?$(nextname).show(1000,nextturn(next)):$('#pic1').show(1000,next...

DoTween插件介绍及使用示例

序列动画：创建按顺序播放的动画序列，可添加回调函数。事件监听：在动画结束后执行自定义操作。路径动画：沿指定路径平滑移动。物理动画：模拟物理效果，支持回调函数。混合动画：组合旋转、移动和缩放等效果。循环动画：设置循环次数和播放方向。深入Tweeners利用Tweeners创建复杂动画，如序列中的...

canvas动画怎么调先后顺序?

在 Canvas 动画中，可以使用 requestAnimationFrame() 方法来控制动画的调用顺序。requestAnimationFrame() 方法是浏览器提供的一种优化的动画调用方式，它会在下一次浏览器重绘之前调用你传入的回调函数，以确保动画的流畅性和性能。例：function animate() { // 第一个动画 // ...requestAnimationFram...

animate参数(animation的参数)

jquery的animate动画的回调函数怎么带参数？animate(params,options)用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left...

一个动画走完另一个动画才可以走回调函数和函数调用为什么要用回调函数回调函数是什么 gui回调函数调用回调函数调用条件为什么回调函数是异步的 callback回调函数 c++回调函数

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

焦点

播放完一个动画怎么回调函数

最新推荐

猜你喜欢

热门推荐

播放完一个动画 怎么回调函数

最新推荐

猜你喜欢

热门推荐

播放完一个动画怎么回调函数