CSS3結(jié)合jQuery實現(xiàn)動畫效果及回調(diào)函數(shù)的實例
更新時間：2017年12月27日 10:25:53 作者：pengbo518
下面小編就為大家分享一篇CSS3結(jié)合jQuery實現(xiàn)動畫效果及回調(diào)函數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
寫期末項目中，朋友提出的 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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實現(xiàn)簡單的輪換出現(xiàn)效果實例
這篇文章主要介紹了jquery實現(xiàn)簡單的輪換出現(xiàn)效果,涉及jquery針對圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
jquery中的foreach想必大家并不陌生吧，使用jquery的朋友肯定會很熟悉，本文有個不錯的示例大家不妨可以鞏固一下2013-09-09
jquery 選擇器，jquery學(xué)習(xí)與開發(fā)中需要用的到，大家可以收藏下，另外可以看下本站提供的學(xué)習(xí)jquery的資料。2009-10-10
這篇文章主要介紹了jQuery中insertBefore()方法用法,實例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個指定的元素集合前面的使用技巧,需要的朋友可以參考下2015-01-01
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。2015-02-02
開發(fā)前期用自動生產(chǎn) 固定大小的圖片 進行 顯示，發(fā)現(xiàn)不能滿足，在前期的時候把保存了原圖，現(xiàn)在只能顯示原圖，原圖由于上傳時候沒有做任何限制所有要使用 圖片不完全按比例縮小，下面是代碼2013-07-07
jQuery源碼解讀之extend()與工具方法、實例方法詳解
這篇文章主要介紹了jQuery源碼解讀之extend()與工具方法、實例方法,分析了jQuery中extend()源碼、功能與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了使用jquery插件qrcode生成二維碼的方法，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Jquery焦點圖實例代碼,詳細(xì)講述了使用jQuery實現(xiàn)焦點圖的詳細(xì)步驟,代碼中備有較為詳盡的注釋說明,便于大家理解,需要的朋友可以參考下2014-11-11