Question

我正在尝试使用jQuery通过将鼠标悬停在另一个div上来显示隐藏的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将被设置为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，同时保留间距/流量

2 个答案: