Fading un div dans un autre: Rendre plus stable, supprimer la pause blanche, plusieurs fades

Question

J'ai un test setup où la div de vignette se fane dans un autre div, il y a cependant quelques problèmes.

1. Comment puis-je supprimer la pause blanche? Au moment où il disparaît un div à blanc puis disparaît dans la deuxième div. Comment puis-je le faire disparaître d'un div à l'autre sans qu'il ne passe au blanc?
2. C'est un peu instable, si vous survolez rapidement et que la seconde div apparaît sous l'original. Comment puis-je le rendre un peu plus stable?
3. Je vais avoir plusieurs vignettes avec des images et du texte différents dans chacune d'entre elles, comment puis-je configurer la grille pour inclure plusieurs boîtes sans qu'elles ne disparaissent/disparaissent en même temps (c'est-à-dire séparément).

Voici le 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) Au lieu de faire le fadeIn de l'élément de vol stationnaire sur le rappel , faites-le immédiatement. Cela permettra d'éviter le fond blanc montrant par:

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

2) La meilleure façon de le faire est de spécifier une taille sur le conteneur miniature et l'ajouter overflow: hidden; à elle.

3) Enfin, le code suivant fera en sorte que les éléments contenus dans le div-over a plané seront affectés:

$(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;} 

Je sais que ce n'est pas exactement comment votre code ressemble mais vous pouvez voir ce que je veux dire dans un simple explication.

est ici une démo de celui-ci dans jsFiddle http://jsfiddle.net/NxJf8/