jQuery淡入淡出效果

jQuery淡入淡出， fadeIn(), fadeOut(), fadeToggle(), fadeTo();

1、 fadeIn():用于淡入已隐藏的元素。

例如：

    
	
	
	
	
	
    
    
	

	    
淡入已隐藏的元素
	    点击显示效果
	    


	    


	    


	    


	
    
    

点击淡入已隐藏的元素之后，隐藏的界面会依据$(selector).fadeIn(speed,callback);中写的speed时间长短依次有顺序的显示，callback参数是fading完成后所执行的函数名称。

2、fadeOut(),淡出可见元素。

代码如下：

    
	
	
	
	
	
    
    
	

	    
元素淡出可见元素
	    点击淡出可见元素


	    


	    


	    


	
	
    

界面显示：在显示的页面中，当点击“点击淡出可见元素”按钮之后，显示页面则按照fadeOut()的speed进行有顺序的隐藏。

3、fadeToggle(),元素淡入淡出效果随意切换展示。

代码如下：

    
	
	
	
	
	
    
    
	

	    
淡入淡出效果进行任意切换
	    点击随意切换淡入淡出


	    


	    


	    


	
	
    

fadeToggle()方法可以在fadeIn()与fadeOut()之间进行切换，如果元素已淡出，fadeToggle（）会向元素添加淡入效果；如果元素已淡入，fadeToggle()会向元素添加淡出效果。

4、fadeTo()允许渐变为给定的不透明度（值介于0和1之间）。

语法：$(selector).fadeTo(speed,opacity,callback), callback是该函数完成后所执行的函数。

代码如下图所示：

    
	
	
	
	
	
    
    
	

	    
使用fadeTo（）方法改变图形透明度
	    点击按钮使图形透明度变淡