基于JQuery的數(shù)字改變的動畫效果--可用來做計數(shù)器
更新時間：2010年08月11日 22:06:38 作者：
之前用javascript做個計數(shù)器，從網(wǎng)上搜了搜，找不到合適的，就想著用jquery自己做一個
因為要求是動態(tài)的，我就想到了應(yīng)該是位置的變化，想到之前用過的JQuery，把里邊的效果全試了試，最后選用了animate自定義，代碼如下：
<html>
<head>
<title>testAnimate</title>
<script type="text/javascript">
function changeNum(n) { //n設(shè)為想要改成的數(shù)字
$(function () {
$("counter").animate({ top: '+=20px', opacity: '0' }, "slow", function () { //讓數(shù)字向下移動并消失，top為元素距網(wǎng)頁頂部距離，opacity為透明度，值為0~1
document.getElementById("counter").innerHTML = n; //等數(shù)字消失后變?yōu)閚，網(wǎng)頁里有id為counter的一個span元素，這段代碼必須放在animate里邊，否則數(shù)字消失之前它的數(shù)值就改變了
})
.animate({ top: '-=40px' }, "slow") //數(shù)字n跳至原來位置的上方
.animate({ top: '+=20px', opacity: '1' }, "slow"); //數(shù)字n出現(xiàn)并落至數(shù)字原來位置，opacity為0時是對象完全透明，就是消失，值為1時是完全顯現(xiàn)
});
}
</script>
</head>
<body>
<span id="counter">1</span>
</body>
</html>
我只是新手，JQuery的原理不懂，只是效果實現(xiàn)了，把我的思路寫一下，第一次用博客園，不怎么會使，有錯誤請指正，謝謝
復(fù)制代碼 代碼如下:
<html>
<head>
<title>testAnimate</title>
<script type="text/javascript">
function changeNum(n) { //n設(shè)為想要改成的數(shù)字
$(function () {
$("counter").animate({ top: '+=20px', opacity: '0' }, "slow", function () { //讓數(shù)字向下移動并消失，top為元素距網(wǎng)頁頂部距離，opacity為透明度，值為0~1
document.getElementById("counter").innerHTML = n; //等數(shù)字消失后變?yōu)閚，網(wǎng)頁里有id為counter的一個span元素，這段代碼必須放在animate里邊，否則數(shù)字消失之前它的數(shù)值就改變了
})
.animate({ top: '-=40px' }, "slow") //數(shù)字n跳至原來位置的上方
.animate({ top: '+=20px', opacity: '1' }, "slow"); //數(shù)字n出現(xiàn)并落至數(shù)字原來位置，opacity為0時是對象完全透明，就是消失，值為1時是完全顯現(xiàn)
});
}
</script>
</head>
<body>
<span id="counter">1</span>
</body>
</html>
我只是新手，JQuery的原理不懂，只是效果實現(xiàn)了，把我的思路寫一下，第一次用博客園，不怎么會使，有錯誤請指正，謝謝
相關(guān)文章
![jQuery中[attribute=value]選擇器用法實例](http://img.jbzj.com/images/xgimg/bcimg0.png)
jQuery中[attribute=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute=value]選擇器用法,實例分析了[attribute=value]選擇器的功能、定義及給定屬性及屬性值元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
Jquery實現(xiàn)簡單圖片切換效果代碼，需要的朋友可以參考下。2011-01-01
jquery URL判斷，確定菜單樣式,需要的朋友可以參考下，當(dāng)然js也可以的?？梢詤⒖枷孪嚓P(guān)文章。2010-05-05
第一次認(rèn)識jquery延遲對象，這篇文章主要為大家詳細(xì)解析JQ延遲對象的相關(guān)概念,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery表單驗證功能,涉及jquery針對表單項的讀取與正則判定技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了如何簡單實現(xiàn)jQuery級聯(lián)菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
下面小編就為大家?guī)硪黄狫Query在循環(huán)中綁定事件的問題詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單效果代碼,涉及javascript操作頁面元素動態(tài)切換的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
jquery中關(guān)于inArray()函數(shù)的詳細(xì)使用說明2011-10-10
這篇文章主要介紹了jQuery實現(xiàn)的原圖對比窗簾效果,需要的朋友可以參考下2014-06-06