淡化一个div到另一个div:使更稳定，删除白色暂停，多个淡出。

Question

我有一个测试设置，缩略图div变成了另一个div，但是它有一些问题。

1. 我怎样才能消除白暂停？此刻，它把一个div变成白色，然后在第二个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)不要在回调上执行悬停项的fadeIn，而是立即执行。这将防止白色背景显示：

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

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

3)最后，以下代码将确保仅包含在悬停的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

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