淡入淡出一格：更稳定，删除白色暂停，多淡淡

Question

我有一个test setup缩略图div淡入另一个div，但它有一些问题。

1. 如何消除白色暂停？目前它将一格转换为白色，然后淡入第二格。我怎样才能让它从一个div淡出到另一个没有淡化成白色？
2. 这是一个有点不稳定，如果你快速悬停结束第二个div出现在原来的下面。我怎样才能让它更加稳定？
3. 我将在每个图像和文本中添加多个缩略图，如何将网格设置为包含多个框，而不是一次全部淡入/淡出（即分开）。

下面的代码：

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），而不是在回调做悬停项目的淡入，立即执行。这将防止显示了穿过白色背景：

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

2）要做到这一点缩略图容器上指定的大小和添加overflow: hidden;它最简单的方法。

3）最后，下面的代码将包含在徘徊，在专区内确保只有元素会受到影响：

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

我知道这不完全是你的代码的样子，但你能明白我的意思在一个简单的解释。

这里是它的jsfiddle http://jsfiddle.net/NxJf8/演示