JQuery:使用fadeIn/fadeOut显示隐藏的div，同时保留间距/流

Question

我试图通过悬停在另一个div上来使用jQuery来显示隐藏的div。隐藏的div应该一直占据它的空间。在使用可见性时，这样做很好，如下所示：

$('.frase-1').mouseenter(function() {
    $('.field-1').css('visibility', 'visible');
});
$('.frase-1').mouseleave(function() {
    $('.field-1').css('visibility', 'hidden');
});

但我想使用fadeIn/fadeOut效果，如：

$('.frase-2').mouseenter(function() {
  $('.field-2').fadeIn(500);
});
$('.frase-2').mouseleave(function() {
  $('.field-2').fadeOut(500);
});

后一种解决方案的问题是，隐藏的div将被设置为显示:none，这将改变页面的布局和流程。我找到了一个建议通过使用动画({透明性})解决这个问题的答案，如下所示：

$('.frase-3').mouseenter(function() {
  $('.field-3').animate({opacity:1});
});
$('.frase-3').mouseleave(function() {
  $('.field-3').animate({opacity:0});
});

这只起一半的作用:当页面加载时，隐藏的div是可见的(在它不应该看到的地方)，并且只有在悬停时才会第一次消失。

fadeTo也被建议了很多次，但这似乎存在跨平台问题，所以我没有使用它。

我已经把这三种解决方案都放在了这个小提琴中--有没有人提出了解决这个问题的建议？

谢谢!

Answer 1

在解决方案3中，将CSS中的不透明度设置为0，以便在加载时隐藏元素。示例：https://jsfiddle.net/ke0ympv7/82/

Answer 2

将第三个解决方案与下面的CSS一起使用

.field-3{
  opacity:0;
}