C3+jQuery creates animation effects and callback functions

This time I will bring you C3+jQuery to create animation effects and callback functions, what are the precautions for C3+jQuery to create animation effects and callback functions, the following are Let’s take a look at practical cases.

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:

nbsp;html>

	
		<meta>
		<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>
	
	
		<p>
			</p><p>欢迎xxx登录，祝您购物愉快</p>
				
		<script></script>
		<script>
			// 函数入口
			$(function(){
			 show();
			});
			// 动画函数
			function show(){
				// 获取p盒子的高度
			 	var p = $("p").height(); 
			 	$(function(){
			 		// 动画函数
			 	$("p").animate({"bottom":p*9},3000,function(){
			 		// 回调函数
			  	$("p").animate({"bottom":-p},6000);
			 	});			
			 	});
			}
		</script>
	

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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

HTML+CSS+jQuery to implement carousel advertising images

JS to implement positioning navigation bar

How to create paging effect with jquery

The above is the detailed content of C3+jQuery creates animation effects and callback functions. For more information, please follow other related articles on the PHP Chinese website!