将一个div淡入另一个div：使其更稳定，消除白色暂停，多次淡化

我有一个测试设置 ，其中缩略图div淡入另一个div，但它有几个问题。

1. 如何删除白色暂停？ 此刻它将一个div变为白色然后在第二个div中消失。 如何让它从一个div褪色到另一个div而不会褪色为白色？
2. 它有点不稳定，如果你快速盘旋并且第二个div出现在原版下方。 我怎样才能让它更稳定一点？
3. 我将在每个缩略图中使用不同的图像和文本，如何设置网格以包含多个框，而不会同时淡入/淡出（即单独）。

这是代码：

Javacript：

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

HTML：

 
 
  
 
DTR Medical
 
Branding, Web, Print
 
 
 
 
 
Probeything 2000
 
Marketing unglamorous single-use medical intruments is not simple. We helped Neurosign increasetheir sales by 25% and increasemarket awareness.
 
 
 
DTR Medical
 
Branding, Web, Print
 
  

Answer 1

1）不要在回调上执行hover项的淡入淡出，而是立即执行。 这将阻止白色背景显示：

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

2）最简单的方法是在缩略图容器上指定一个大小并添加overflow: hidden; 它。

3）最后，下面的代码将确保只有hovered-over div中包含的元素才会受到影响：

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

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/