寫期末項目中，朋友提出的 idea ，當(dāng)用戶登錄成功時歡迎用戶的特效，即歡迎用戶信息從底部上升到頁面中，之后再退回底部。
他遇到的問題是：從底部能出來提示信息，但是出來之后就下不去了。
聽過后，考慮之，想到用回調(diào)函數(shù)來解決這個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"> // 函數(shù)入口 $(function(){ show(); }); // 動畫函數(shù) function show(){ // 獲取p盒子的高度 var p = $("p").height(); $(function(){ // 動畫函數(shù) $("p").animate({"bottom":p*9},3000,function(){ // 回調(diào)函數(shù) $("p").animate({"bottom":-p},6000); }); }); } </script> </body></html>這里主要用到了css3中的 animate 動畫屬性，結(jié)合 jQuery 實現(xiàn)動畫執(zhí)行的時間和方向，最后設(shè)置回調(diào)函數(shù)使提示信息回到初始位置即可。
以上這篇CSS3結(jié)合jQuery實現(xiàn)動畫效果及回調(diào)函數(shù)的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
