在网页设计过程中，我们可能会需要一些特效来丰富显示效果，要么平滑滚动，要么颜色渐变等等，这些利用JQuery可以很方便的完成，但是今天我要介绍的是利用原始的setTimeout方法并结合递归来实现，效果还是很不错的，下面先看展示：

效果展示

 

(==================这里是图1===================)

(=====================这里是图2=================)

图1是开始运行的时候，图2是运行完成之后。

下面来说下我的设计思路：

首先，既然要实现平滑的效果，我们需要一直调用某个函数，并且在这个函数内部，状态值能够不停地改变，这让我想起了递归，所以，在上图的三个实例中，均采用了递归来实现，现在列举其中一个：

function changePrograssbarIncremental(i) {            $("#myPro").css("width", i);            $("#myPro").text(Math.floor(i / 2) + "%");            if (i < 200) {                tPrograss = setTimeout('changePrograssbarIncremental(' + (i + 1) + ')', 50);                            }        }

 

这样，当程序进来的时候，setTimeout会依据当前的条件，每隔50ms就会调用changePrograssbarIncremental函数一次，直到i值为200的时候停止，这样就实现了HTML控件状态的不断改变，然后只需要简单的申明一个函数来调用即可：

//动态更新prograssbar的值        var tPrograss;        function changePrograssbar() {            clearTimeout(tPrograss);  //防止多个instance一起运行,造成重影效果            changePrograssbarIncremental(0);        }

 

源码下载

。

附上参考文章：