如何實現動畫效果及回呼函數
- 亚连原創
- 2018-06-15 11:37:152566瀏覽
下面我就為大家分享一篇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 實現動畫執行的時間和方向，最後設定回呼函數使提示訊息回到初始位置即可。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
############################################使用JS如何寫的九九乘法表#######以上是如何實現動畫效果及回呼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn