如何實現動畫效果及回呼函數-js教程-PHP中文網

如何實現動畫效果及回呼函數

亚连

發布： 2018-06-15 11:37:15

原創

2521 人瀏覽過

下面我就為大家分享一篇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如何寫的九九乘法表#######

以上是如何實現動畫效果及回呼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！