JQuery：使用fadeIn/fadeOut显示隐藏的div同时保留spacing/flow

Question

我正在尝试使用 jQuery 通过将鼠标悬停在另一个 div 上来显示隐藏的 div。隐藏的 div 应该一直占据它的 space 。这在使用可见性时效果很好，如下所示：

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

但我想使用 fadeIn/fadeOut-effect，像这样：

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

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

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

这只起作用了一半：隐藏的 div 在页面加载时可见（在不应该看到的地方），并且只有在悬停时才第一次消失。

fadeTo也提示了很多次，不过好像有跨平台的问题，所以没用

我把所有三个解决方案都放在了这个 fiddle - 有没有人建议如何解决这个问题？

谢谢！

Answer 1

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

Answer 2

使用下面的第三个解决方案CSS

.field-3{
  opacity:0;
}

JQuery：使用fadeIn/fadeOut显示隐藏的div同时保留spacing/flow

JQuery: Use fadeIn/fadeOut to reveal hidden div while retaining spacing/flow

jquery

fadeout

fadein