溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫期末項目中，朋友提出的 idea ，當用戶登錄成功時歡迎用戶的特效，即歡迎用戶信息從底部上升到頁面中，之后再退回底部。
他遇到的問題是：從底部能出來提示信息，但是出來之后就下不去了。
聽過后，考慮之，想到用回調函數來解決這個Bug，然后模擬登錄成功時進入主頁（即刷新頁面），彈出歡迎信息并消失，寫了一個類似這樣的動畫效果。僅供參考：
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>歡迎動畫</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登錄，祝您購物愉快</p>
</div>
<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 實現動畫執行的時間和方向，最后設置回調函數使提示信息回到初始位置即可。
以上這篇CSS3結合jQuery實現動畫效果及回調函數的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
