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

Jan 2nd, 2010
发表评论 | Trackback

普通的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，祝各位朋友新年快乐。

标签: , ,
  1. evlos
    Jan 2nd, 201012:18
    回复 | 引用 | #1

    哇哦，最喜欢这种灰度变彩色的了 ~！

  2. hfantasy
    Jan 2nd, 201015:03
    回复 | 引用 | #3

    我比较傻，不会用啊~ /汗

  3. 河北安全博客
    Jan 3rd, 201011:20
    回复 | 引用 | #6

    博主2号还没休息啊 呵呵 辛苦了！

  4. 北街
    Jan 4th, 201000:10
    回复 | 引用 | #8

    J-Q就是这么的华丽！^_^

  5. kikoshoung
    Feb 25th, 201001:52
    回复 | 引用 | #10

    高手~这个东西还是没整明白~变了彩色之后鼠标移出的动作应该建立在彩色层上啊，怎么你是建立在灰色层上的啊？！ 还有两个层的完全重叠能详细讲解一下吗？！ 谢谢了~

    • fatkun
      Mar 1st, 201019:38
      回复 | 引用 | #11

      @kikoshoung, 在那个层建立都没关系，他们都在同一个位置嘛~其实彩色层一直覆盖着灰色层，只是彩色层透明度为0。

      两个层完全重叠
      灰色层用了相对定位：position:relative;（其实就是为了告诉里面彩色层 .hover 你的绝对定位参考线在这里）
      彩色层用了绝对定位：position:absolute;top:0;left:0;

  6. kikoshoung
    Mar 14th, 201020:28
    回复 | 引用 | #12

    哈哈哈 多谢高手指点 已经明白了

  7. 最有效的减肥药
    May 4th, 201011:01
    回复 | 引用 | #13

    和flash效果完全一样。

  8. Coasta
    Jul 13th, 201019:37
    回复 | 引用 | #14

    请问jQuery代码跟html代码位置是怎么放的？？？ /撇嘴

    • fatkun
      Jul 13th, 201022:30
      回复 | 引用 | #15

      @Coasta, html代码比Jquery代码前就可以了。看例子：http://fatkun.com/demo/jquery-animate-background/

  9. w3ccss
    Sep 8th, 201018:05
    回复 | 引用 | #17

    多个效果怎么做的啊？ 类似于导航似的`！

    • fatkun
      Sep 8th, 201021:42
      回复 | 引用 | #18

      多个效果也是差不多的，你大概理解一下Jquery这里只是让.hover层（彩色层）缓慢显示出来，css把两个图层重叠在一起，不过上面的代码可能不能直接用，需要改一下。