淡入淡出一格：更穩定，刪除白色暫停，多淡淡

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/演示