jquery picture Silhouette Fadeins gradient effect_jquery

A few friends in my band just went through a small lineup change. They need to change the photo on their home page. I thought it might be interesting to have a little interaction.

There may be many ways to achieve this effect, this one just popped into my head and I went with it. The idea is to have an outline as a background image, and then, within the group, 4 images with each band member all exactly the same size. These images are hidden by default. Then, there are 4 absolutely positioned areas above the area, which are the transition areas. In jQuery, we use them on hover events to gradually display the corresponding image.

HTML
As I said, just a div with four images and a transition area inside it. All have a unique ID and a common class name.

< ;/a>







< /div>

CSS
is covered by the class name (such as position style), followed by the ID (including specific left position special things).

Copy code The 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 the mouse hovers over the corresponding area, it corresponds to the ID of the image and fades. At this time, stop() is used to prevent the animation from being queued here. We use the opacity setting. fadeToggle() fades when the mouse is moved too quickly.

Copy code The 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 });
});
});

Download addresshttp ://www.jb51.net/jiaoben/24272.html