JQUERY实现背景图渐显（淡入淡出）

实现原理

通过一个两张不同的图片，两个不同的层重叠在一起，顶层暂时透明，当鼠标移上去时，顶层由透明变成不透明，鼠标离开反之。

下面写代码
html结构：

1	<a id="logo" href="http://fatkun.com"><span>fatkun.com</span></a>

css代码：

	#logo{
		margin:0 auto;
		position:relative;/*相对定位,为了下面hover的绝对定位*/
		background:url(fatkun.png) left top no-repeat;/*设置背景图*/
		width:150px;
		height:40px;/*注意这里高度*/
		display:block;
		text-indent:-9999px;
	}
	#logo .hover{/*为JQ准备*/
		background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
		position:absolute;/*为了使两张图片重叠在一起*/
		top:0;
		left:0;
		height:40px;
		width:150px;
	}

最后最重要的JQuery代码出现了

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
		$("#logo").append("<span class='hover'></span>");//添加一个标签用来和灰图重叠起来
		$(".hover").css('opacity', 0);//先不显示
    	$(".hover").parent().hover(
		function(){
			$(".hover").stop().animate({opacity: '1'},1000);
		},
		function(){
			$(".hover").stop().animate({opacity: '0'},1000);
		});
    </script>