JQuery实现遍历元素并依次渐隐渐显

主要思路就是用each遍历并用delay实现延迟添加动画，需要注意的是delay函数只对动画有效，delay函数是将后面的函数放到队列里，等延迟结束后所以元素同时触发了动画。解决的方案就是使delay的参数自增。代码如下：

	$('.intro-feature').each(function(i){
		$(this).delay(i*500).fadeIn(500);
	});

下面用个实例演示一下，当页面滚动到某个元素时，多个div依次渐显。效果用到了waypoint插件。

$(document).ready(function() {
	$('.intro').waypoint(function(){
		$('.intro-feature').each(function(i){
			$(this).delay(i*500).fadeIn(500);
		});
	},{
		offset: '25%'
	});
});

html代码：

        

            

                

                    

                        
我们的教学和服务
                        
what can we do for you?
                        Our Services
                    
                
                

                    

                        
我们的宗旨和理念
                        
What is our vision?
                        Our Vision
                    
                
                

                    

                        
我们的承诺
                        
We dare to promise?
                        Our Promise