CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:22:54

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例:寫期末項(xiàng)目中，朋友提出的 idea ，當(dāng)用戶登錄成功時(shí)歡迎用戶的特效，即歡迎用戶信息從底部上升到頁(yè)面中，之后再退回底部。他遇到的問(wèn)題是：從底部能出來(lái)提示信息，但是出來(lái)之后就下不去了。聽(tīng)過(guò)后，考慮之，想到用回調(diào)函數(shù)來(lái)解決這個(gè)Bug，然后模擬登錄成功

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例:寫期末項(xiàng)目中，朋友提出的 idea ，當(dāng)用戶登錄成功時(shí)歡迎用戶的特效，即歡迎用戶信息從底部上升到頁(yè)面中，之后再退回底部。他遇到的問(wèn)題是：從底部能出來(lái)提示信息，但是出來(lái)之后就下不去了。聽(tīng)過(guò)后，考慮之，想到用回調(diào)函數(shù)來(lái)解決這個(gè)Bug，然后模擬登錄成功

寫期末項(xiàng)目中，朋友提出的 idea ，當(dāng)用戶登錄成功時(shí)歡迎用戶的特效，即歡迎用戶信息從底部上升到頁(yè)面中，之后再退回底部。

他遇到的問(wèn)題是：從底部能出來(lái)提示信息，但是出來(lái)之后就下不去了。

聽(tīng)過(guò)后，考慮之，想到用回調(diào)函數(shù)來(lái)解決這個(gè)Bug，然后模擬登錄成功時(shí)進(jìn)入主頁(yè)（即刷新頁(yè)面），彈出歡迎信息并消失，寫了一個(gè)類似這樣的動(dòng)畫效果。僅供參考：

效果圖：

代碼如下：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>歡迎動(dòng)畫</title>
	<style>
	 	*{margin:0;padding:0;}
	 	div {
	 	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>
	<div>
	<p>歡迎xxx登錄，祝您購(gòu)物愉快</p>
	</div>
	
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	// 函數(shù)入口
	$(function(){
	 show();
	});
	// 動(dòng)畫函數(shù)
	function show(){
	// 獲取p盒子的高度
	 	var p = $("p").height(); 
	 	$(function(){
	 	// 動(dòng)畫函數(shù)
	 	$("p").animate({"bottom":p*9},3000,function(){
	 	// 回調(diào)函數(shù)
	 	$("p").animate({"bottom":-p},6000);
	 	});
	
	 	});
	}
	</script>
	</body>
</html>

這里主要用到了css3中的 animate 動(dòng)畫屬性，結(jié)合 jQuery 實(shí)現(xiàn)動(dòng)畫執(zhí)行的時(shí)間和方向，最后設(shè)置回調(diào)函數(shù)使提示信息回到初始位置即可。

以上這篇CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：動(dòng)畫 css3 回調(diào)函數(shù)

熱門焦點(diǎn)

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例

CSS3結(jié)合jQuery實(shí)現(xiàn)動(dòng)畫效果及回調(diào)函數(shù)的實(shí)例

最新推薦

猜你喜歡

熱門推薦