先来看下背景图淡入淡出的原理：
通过一个两张不同的图片，两个不同的层重叠在一起，顶层暂时透明，当鼠标移上去时，顶层由透明变成不透明，鼠标离开反之。
下面来看jquery实现背景图片淡入淡出效果的具体例子，一起学习下。
1，html部分：
复制代码 代码示例:
<a id="logo" href="">
<span>语句百分网</span></a>
2，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;
}
3，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>
4，完整实例
复制代码 代码示例:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery 背景图渐显--www.yuju100.com</title>
<style type="text/css">
body{
padding-top:100px;
text-align:center;
}
#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;
}
</style>
</head>
<body>
<a id="logo" href="http://yuju100.com"><span>yuju100.com</span></a>
yuju100.com
<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>
</body>
</html>
