Fading one div into another: Make more stable, remove white pause, multiple fades

Question

I have a test setup where the thumbnail div fades into another div, there's a couple of problems with it though.

1. How can I remove the white pause? At the moment it fades one div out to white then fades in the second div. How can I make it fade from one div to the other without it fading to white?
2. It's a little unstable, if you hover over quickly and out the second div appears below the original. How can I make it a bit more stable?
3. I'm going have multiple thumbnails with different images and text in each one, how can I setup the grid to include multiple boxes without them all fading in/out at once (i.e separately).

Here's the code:

Javacript:

<script type="text/javascript"> 

$(document).ready(function(){
            $(".phase-2").hide();
        });


$(function(){
$('.grid-box').hover(
        function(){
            $('.grid-box .phase-1').fadeOut(300, function(){
                $('.grid-box .phase-2').fadeIn(300);                         
            });
        },
        function(){
            $('.grid-box .phase-2').fadeOut(300, function(){
                $('.grid-box .phase-1').fadeIn(300);                         
            });
        }
        ); 
});
</script>

HTML:

<div class="grid-box">
<div class="phase-1">
       <img class="grid-image" src="http://teamworksdesign.com/v2/wp-content/themes/default/images/dtr.jpg" alt="" height="152" width="210" />
   <div class="grid-heading">
        <h2>DTR Medical</h2>
        <h3>Branding, Web, Print</h3>
    </div> 
</div>
<div class="phase-2">
    <div class="grid-info">
        <h4>Probeything 2000</h4>
        <p>Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.</p>
    </div>
    <div class="grid-heading-hover">
        <h2>DTR Medical</h2>
        <h3>Branding, Web, Print</h3>
    </div> 
</div>

Answer 1

1) Rather than do the fadeIn of the hover item on the callback, do it immediately. This will prevent the white background showing through:

$('.grid-box .phase-1').fadeOut(300);
$('.grid-box .phase-2').fadeIn(300);

2) The easiest way to do this is to specify a size on the thumbnail container and the add overflow: hidden; to it.

3) Finally the following code will make sure only the elements contained within the hovered-over div will be affected:

$(function(){
    $('.grid-box').hover(
        function(){
            $('.phase-1', this).fadeOut(300);
            $('.phase-2', this).fadeIn(300);
        },
        function(){
            $('.phase-2', this).fadeOut(300)
            $('.phase-1', this).fadeIn(300);
        }
    ); 
});

Answer 2

HTML

<div class="grid-box">
    <div class="phase-1"></div>
    <div class="phase-2"></div>
</div>

JQ

$(document).click(function (){
$('.grid-box .phase-1').animate({opacity:50},2000).queue(function(){
     $(this).hide();

});
$('.grid-box .phase-2').fadeIn(2000);
});

CSS

.phase-1{width: 100px;height: 100px;background: red; position:absolute;}
.phase-2{width: 100px;height: 100px;background: blue;display: none; position:absolute;}

I know this isn't exactly how your code looks like but you can see what I mean in a simple explaination.

here is a demo of it in jsfiddle http://jsfiddle.net/NxJf8/