Jquery image silhouette fadeins fade-in

Some of my band's friends have just experienced a small member Lineup change. They need to change the photos on their home page. I think it may be interesting to see a little interaction.

There may be many ways to achieve this effect. This one just came into my head and suddenly appeared, and I went with it. The idea is to have a profile as the background image, and then, in this group all exactly the same size as each band member's 4 images. These images are hidden by default. Then, there are four regions that are definitely located above the region, which is the role of the transition zone. In jquery, we use their hover events to gradually display the corresponding images.

Html
As I said, a div contains four images and transition areas. All class names with unique IDs and common class names.

CopyCode The Code is as follows: <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>

</Div>

CSS
Class names cover commonalities (such as location styles), followed by IDS (including specific things at the left side ).Copy codeThe Code is as follows: # 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
When you hover your mouse over the corresponding area, it corresponds to the image ID and fade, you need to use stop () to prevent the animations queuing here and we use opacity settings. Fadetoggle (), when the mouse moves too fast and fades.Copy codeThe Code is as follows: $ (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 });
});
});

Http://www.jb51.net/jiaoben/24272.html