顺序淡出图片显示

HTML

<!--图片显示的容器-->
<div id="content">
 <!--定义各种不同的要显示的图片-->
 <span><img src="images/sample1.jpg" alt="喜鹊报喜" /></span>
 <span><img src="images/sample2.jpg" alt="姹紫嫣红" /></span>
 <span><img src="images/sample3.jpg" alt="水墨风情" /></span>
 <span><img src="images/sample5.jpg" alt="含苞盛放" /></span>
                        

JS

$(document).ready(function(){
    $('div#content span').hide();   //隐藏所有的图片
    function outer(){             //定义一个函数，它返回一个闭包函数
        var a = 0;                 //定义下标变量
        function inner(){         //定义一个内部函数，它会依次淡出图片 			   
            if(a===$('div#content span').length){
                return;            //如果图片显示完成，则返回
                }
            //依次淡出显示图片
            $('div#content span').eq(a).fadeIn(1000,function(){fader();});
            a++;				   //将计数器加1	
        }
    return inner;                 //返回内部函数
    }
    var fader = outer();          //将函数结果赋给fader变量
    fader();	                   //执行内部函数
});