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

我有一个缩略div淡入另一个div的例子，不过有几个问题

如何消除白色停顿？此时，它会从一个div淡出到白色，然后在第二个div中淡出。如何使它从一个div淡出到另一个div而不淡出到白色

它有点不稳定，如果你快速悬停在上面，第二个div出现在原始div的下面。我怎样才能使它更稳定一点

我将有多个缩略图，每个缩略图中有不同的图像和文本，如何设置网格以包含多个框，而不使它们同时淡入/淡出（即分别淡入/淡出） 代码如下：

JavaScript：

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

$（文档）.ready（函数（）{
$（“.phase-2”）.hide（）；
});
$（函数（）{
$（'.grid box'）。悬停(
函数（）{
$（'.grid box.phase-1'）.fadeOut（300，function（）{
$（'网格框.第二阶段'）.fadeIn（300）；
});
},
函数（）{
$（'.grid box.phase-2'）.fadeOut（300，function（）{
$（'网格框.第1阶段'）.fadeIn（300）；
});
}
); 
});

HTML:

DTR医疗
品牌、网络、印刷
概率2000
营销乏味的一次性医疗器械并不简单。我们帮助Neurosign将其销售额提高了25%，并提高了市场知名度

DTR医疗
品牌、网络、印刷

1）与其在回调中对悬停项进行淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出。这将防止白色背景通过以下方式显示：

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

HTML

<div class="grid-box">
    <div class="phase-1"></div>
    <div class="phase-2"></div>
</div>

CSS

.phase-1{width: 100px;height: 100px;background: red; position:absolute;}
.phase-2{width: 100px;height: 100px;background: blue;display: none; position:absolute;}

我知道这并不完全是你的代码的样子，但你可以从一个简单的解释中看出我的意思

这是一个在JSFIDLE中的演示，白色暂停是因为它的可见性变为零；使用“带不透明度的动画”选项淡入淡出，并将其保留在50%，然后在完成后使用“隐藏”。谢谢Val，刚刚错过了您的答案。你有我可以看的代码示例吗？这是我能力的极限！！听起来好像你的答案会让我有更多的控制，比如放松，不透明和持续时间，听起来很完美。检查我下面的答案，你就有了一个工作演示，它更让人窒息了，谢谢。快到了，我又把它上传到了测试页面。还是会先变成白色。问题2和3已排序（有一点玩），所以谢谢你。似乎第一阶段逐渐变白，第二阶段才出现。奇怪。我以前从未见过这种使用这种技术的行为。尝试添加
位置：绝对到您的
阶段1
和
阶段2
div。这里有一把小提琴来展示它的工作原理：太好了，我从来没有想过这会解决它，但它确实解决了。谢谢你的帮助。有没有办法用点击代替悬停？我试着把电话改成。单击，但在小提琴中不起作用。谢谢！我已经做了最后2秒，所以你可以看到更好的过渡感谢Val，Rory修复了代码，每个人都对过渡感到满意，所以我想我们会继续。也许这也会给其他人一个选择。没问题：）只要它起作用，不管你用什么lol:）
$(document).click(function (){
$('.grid-box .phase-1').animate({opacity:50},2000).queue(function(){
     $(this).hide();

});
$('.grid-box .phase-2').fadeIn(2000);
});

.phase-1{width: 100px;height: 100px;background: red; position:absolute;}
.phase-2{width: 100px;height: 100px;background: blue;display: none; position:absolute;}