jquery - 将一个 div 淡入另一个 : Make more stable, 删除白色暂停、多次淡入淡出

Question

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

1. 如何消除白色停顿？目前，它会将一个 div 淡出为白色，然后在第二个 div 中淡出。如何让它从一个 div 淡出到另一个 div 而又不褪色为白色？
2. 它有点不稳定，如果你快速将鼠标悬停在上面，第二个 div 会出现在原始 div 的下方。我怎样才能让它更稳定一点？
3. 我将有多个缩略图，每个缩略图中都包含不同的图像和文本，如何设置网格以包含多个框，而不会使它们同时淡入/淡出(即单独淡入/淡出)。

代码如下:

Java 脚本:

<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: hide;。

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