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>我做的例子在这里：http://fatkun.com/demo/jquery-animate-background/
到学期末了~~考试就要来了~更新减缓·~2010，祝各位朋友新年快乐。
哇哦，最喜欢这种灰度变彩色的了 ~！
@evlos, /大笑 我也喜欢·~~
我比较傻，不会用啊~ /汗
@hfantasy, Demo在此：http://fatkun.com/demo/jquery-animate-background/
@fatkun, 额，这样看上去貌似还不错，哇咔卡~ /鼓掌
博主2号还没休息啊 呵呵 辛苦了！
@河北安全博客, 放假也是呆在宿舍~~
J-Q就是这么的华丽！^_^
@北街, 嗯~~动画很容易实现~~
高手~这个东西还是没整明白~变了彩色之后鼠标移出的动作应该建立在彩色层上啊，怎么你是建立在灰色层上的啊？！ 还有两个层的完全重叠能详细讲解一下吗？！ 谢谢了~
@kikoshoung, 在那个层建立都没关系，他们都在同一个位置嘛~其实彩色层一直覆盖着灰色层，只是彩色层透明度为0。
两个层完全重叠
灰色层用了相对定位：position:relative;（其实就是为了告诉里面彩色层 .hover 你的绝对定位参考线在这里）
彩色层用了绝对定位：position:absolute;top:0;left:0;
哈哈哈 多谢高手指点 已经明白了
和flash效果完全一样。
请问jQuery代码跟html代码位置是怎么放的？？？ /撇嘴
@Coasta, html代码比Jquery代码前就可以了。看例子：http://fatkun.com/demo/jquery-animate-background/
@fatkun, 行吧，我试下，不懂再来请教，谢啦
多个效果怎么做的啊？ 类似于导航似的`！
多个效果也是差不多的，你大概理解一下Jquery这里只是让.hover层（彩色层）缓慢显示出来，css把两个图层重叠在一起，不过上面的代码可能不能直接用，需要改一下。
收藏一下!
赞 新主题会用到这个效果的···