将一个div淡入另一个:更稳定,消除白色暂停,多次淡化

Question

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

1. 如何删除白色暂停？此刻它将一个div变为白色然后在第二个div中消失.如何让它从一个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)不要在回调上执行悬停项的淡入淡出,而是立即执行.这将阻止白色背景显示:

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