剪影淡入

我的一些朋友的 乐队 最近经历了一次小规模的成员阵容变更。他们需要更换主页上的照片。我认为在那里做一些稍微互动的东西会很有趣。我们使用了乐队成员的剪影，在鼠标悬停时淡入真实的 фотографии。

可能有很多方法可以做到这一点……这个方法只是突然出现在我的脑海中，我就用了它。这个想法是在一个 div 中使用剪影作为背景图像。然后在该 div 内放置四个图像，所有图像都具有完全相同的尺寸，并突出显示每个乐队成员。默认情况下，这些图像处于隐藏状态。然后在 div 的顶部放置四个绝对定位的区域。这些是鼠标悬停区域/链接。在 jQuery 中，我们监视这些区域的悬停事件，并淡入相应的图像。

HTML

就像我提到的，只是一个 div，里面包含四个图像和四个鼠标悬停区域。所有都具有唯一的 ID 和通用的类名。

<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="images/guys-aller.jpg" alt="" id="image-aller" class="single-guy" />
    <img src="images/guys-neil.jpg" alt="" id="image-neil" class="single-guy" />
    <img src="images/guys-aaron.jpg" alt="" id="image-aaron" class="single-guy" />
    <img src="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，该 ID 与图像的 ID 相对应，并将其淡入。我们确保在此处使用 .stop() 以防止动画排队，并且我们使用不透明度设置而不是 .fadeToggle()，因为 .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 });
    });

});

查看演示   下载文件