How do I animate this? jquery

[rpeg]

I'm a novice at jquery (or maybe just a beginner).

I have this page - http://aug4th.com/testpage/index_test.html (content has been removed so ignore the broken menu and empty areas)

I only need help with the portion that says, "Target at scale..." and has floating people.

Right now on hover, the profile images change along with the background image. I need the profile images to animate in a way where their name remains in place (animators, photographers, etc) and the image quickly fades into the next and fades out when you move away. Right now it's jumpy. I'm not sure how to approach it.

I tried to animate it and do some things but i really couldn't get right.

Suggestions?

[AussieJohn]

Hey rpeg,

The trick here is to, rather than swap the images out like you're currently doing, to have both images on the page and then fade from one to the other.

I've knocked up a quick demo on JS Fiddle: http://jsfiddle.net/GeekyJohn/Skf6v/

The basics are:

<div class="pic">
    <img src="http://placehold.it/200x300&text=pic1_on" alt="" class="on" />
    <img src="http://placehold.it/200x300/6699ff/ffffff&text=pic1_off" alt="" class="off" />
</div>

Just basic markup - a container that will be relatively positioned, then we absolutely position the images inside of it.

.pic { /* pic container */
    position: relative;
    float: left;
    margin:30px;
    width:200px;
    height:300px;
}
 
 
.pic img  { /* pics are absolutely positioned so their content can overlap exactly */
    position: absolute;
    top:0;
    left:0;
}
/* if you need to, you can position the off or on image slightly differently so that things line up better */
 
 
.pic img.off { /* hide the "off" state by default */
    display: none;
}

so, css is pretty basic as well - no need for it to be too complicated

$(document).ready(function(){
    //monitor the mouseenter/leave events
    $(".pic").on("mouseenter mouseleave", function(e){
        //make sure we're showing/hiding the correct els
        var showEl = e.type === "mouseenter" ? ".off" : ".on",
            hideEl = e.type === "mouseenter" ? ".on" : ".off";
 
        // fade in/out the elements, play around with the speeds for different effects
        // sometimes a fast fadeout and slightly slower fadein can look nice for example
        $(this).find(showEl).fadeIn( 500);
        $(this).find(hideEl).fadeOut(500);
    });
});

Again, the JavaScript is relatively simple, it's the combination of css/js/markup that makes it all work nicely