图片Silhouette Fadeins渐显效果

核心提示：经常漂流在css-tricks看到这篇文章，就顺便搬了过来，图片Silhouette Fadeins渐显效果，下面译文都是用css-tricks口吻来描述的， 我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化，以防止在这里排队的动画和我们使用不透明设置，fadeToggle()，他们需要更换其主页上的照片，我想这可

经常漂流在css-tricks看到这篇文章，就顺便搬了过来，下面译文都是用css-tricks口吻来描述的。

我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化。他们需要更换其主页上的照片。我想这可能是有趣的事情出现了少许的互动。

这可能有不少方法可以做到这个效果，这一个刚刚进入我的头突然出现，我随它而去了。这个想法是有一个作为背景图像的轮廓，然后，在该组所有完全相同的大小与每个乐队成员的4个图像。这些图像默认隐藏。然后，有4个绝对定位的区域上面所在的区域，这是过渡区作用。在jQuery的，我们用他们悬停事件，渐渐显示相应的图像。

HTML

正如我所说，只是一个div里面有四个图像和过渡区域。所有具有独特的ID和共同的class类名。

<div　id="home-photos-box">
　　　　<a　id="aller"　href="#aller"　class="home-roll-box"></a>
　　　　<a　id="neil"　href="#neil"　class="home-roll-box"></a>
　　　　<a　id="aaron"　href="#aaron"　class="home-roll-box"></a>
　　　　<a　id="scott"　href="#scott"　class="home-roll-box"></a>
　　　　<img　src="http://tech.ddvip.com/2010-03/images/guys-aller.jpg"　alt=""　id="image-aller"　class="single-guy"　/>
　　　　<img　src="http://tech.ddvip.com/2010-03/images/guys-neil.jpg"　alt=""　id="image-neil"　class="single-guy"　/>
　　　　<img　src="http://tech.ddvip.com/2010-03/images/guys-aaron.jpg"　alt=""　id="image-aaron"　class="single-guy"　/>
　　　　<img　src="http://tech.ddvip.com/2010-03/images/guys-scott.jpg"　alt=""　id="image-scott"　class="single-guy"　/>
</div>

CSS

由类名涵盖共性（如位置样式），其次是ID的（包括具体左侧位置特殊的东西）。

#home-photos-box　{　float:　left;　width:　352px;　background:　url(../images/guys-allblack.png)　no-repeat;　padding:　334px　0　0　0;　position:　relative;　}
#aller　{　left:　0;　}
#neil　{　left:　25%;　}
#aaron　{　left:　50%;　}
#scott　{　left:　75%;　}
.home-roll-box　{　position:　absolute;　z-index:　1000;　display:　block;　　height:　334px;　top:　0;　width:　25%;　}
.single-guy　{　position:　absolute;　top:　0;　left:　0;　display:　none;　opacity:　0;　}

jQuery

当鼠标悬停到对应区域，它对应于图像的ID和褪色，这时要使用stop() ，以防止在这里排队的动画和我们使用不透明设置。fadeToggle()，当太快和滑鼠移到消退。

$(function()　{
　　　　var　name　=　"";
　　　　$(".home-roll-box").hover(function()　{
　　　　　　　　name　=　$(this).attr("id");
　　　　　　　　$("#image-"+name).stop().show().animate({　opacity:　1　});
　　　　},　function()　{
　　　　　　　　name　=　$(this).attr("id");
　　　　　　　　$("#image-"+name).stop().animate({　opacity:　0　});
　　　　});
});

本文示例源代码或素材下载