圖片Silhouette Fadeins漸顯效果【譯自css-tricks】

文章目錄

•  
• HTML
• CSS
• jQuery

經常漂流在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="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和褪色，這時要使用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 });
    });
});

 

 查看demo     下載例子        原文地址