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

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

$('.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将被设置为display:none，这将改变页面的布局和流程。我找到了一个建议使用animate（{transparency}）解决这个问题的答案，如下所示：

$('.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也被建议了很多次，但似乎有跨平台的问题，所以我没有使用它

我已经把这三个解决方案都放在这里了——有人对如何解决这个问题提出了建议吗

---

谢谢

在解决方案3中，在CSS中将不透明度设置为

0

，以便加载时隐藏元素。示例：

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

.field-3{
  opacity:0;
}

---

用最终解决方案编辑谢谢你的回答。