JQUERY实现背景图渐显（淡入淡出）(转)
JQUERY实现背景图渐显（淡入淡出）
2 一, 2010 in jquery
普通的CSS Hover最多就换一下背景图，不是很好看~我们利用jquery给它加上一些淡入的效果~
在这里看到这个例子，我想我还是自己练习一下吧·~效果可以看http://dragoninteractive.com/网站~，挺帅的~
实现原理
通过一个两张不同的图片，两个不同的层重叠在一起，顶层暂时透明，当鼠标移上去时，顶层由透明变成不透明，鼠标离开反之。
准备工作
用PS做一张图~如下图，注意记下高度是多少。我这张图的高度是两个40px的图
下面写代码
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>
版权声明：本文为vingi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。