How to implement animation effects and callback functions-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement animation effects and callback functions

亚连

Jun 15, 2018 am 11:37 AM

css3jqueryanimationCallback

Below I will share with you an example of CSS3 combined with jQuery to achieve animation effects and callback functions. It has a good reference value and I hope it will be helpful to everyone.

In writing the final project, a friend proposed an idea, a special effect to welcome the user when the user logs in successfully, that is, the welcome user information rises from the bottom to the page, and then returns to the bottom.

The problem he encountered was: The prompt information can come out from the bottom, but after it comes out, it cannot go down.

After hearing this, I thought about it and thought of using a callback function to solve this bug, and then simulated entering the homepage (i.e. refreshing the page) when the login is successful, the welcome message pops up and disappears, and I wrote an animation effect similar to this. For reference only:

Rendering:

##The code is as follows:

<!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>

Here we mainly use the animate animation property in css3, combined with jQuery to realize the time and direction of animation execution, and finally set the callback function to return the prompt information to the initial position.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use ES6 syntax in Node (detailed tutorial)

How to configure Sass in vue scaffolding

Use Nodejs to connect to mysql to implement basic operations

How to implement HTML attribute binding in Angular4

How to write the multiplication table using JS

The above is the detailed content of How to implement animation effects and callback functions. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn