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

我正试图使用jQuery通过将鼠标悬停在另一个div上来显示隐藏的div。隐藏div应该始终占据其空间。这在使用可见性时效果很好,如下所示:

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

但我想使用淡入淡出效果,如下所示:

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

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

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

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

我把这三种解决方案都放在这里了 fiddle

谢谢