jquery - jquery fadeout() 后 Chrome 重绘未正确发生 - 元素保留 Google Chrome 中隐藏元素的高度

Question

我在 mousehover/mouseleave 上淡出一个元素

  function hoverIn() {
    $(this).find('a').addClass('megadropdown-expanded');
    var activeitem = $(this).data("mlid");
    $('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeIn("fast");
  }
  function hoverOut(e) {
    var activeitem = $(this).data("mlid");
    var targetElement = e.relatedTarget;
    if ($(targetElement).closest('[data-mlid=' + activeitem + ']').length == 0) {
      $('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeOut("fast").css("position", "absolute");
      $('.menu-item[data-mlid=' +activeitem + ']').find('a').removeClass('megadropdown-expanded');
    }
  }

一切正常，直到我从元素中删除 position: absolute 。 (我保持在小屏幕下文档的正常流动)

.paddle-mega-dropdown {
  box-shadow: 0px 5px 13px 0px rgba(50, 50, 50, 0.36);
  display: none;
  overflow: hidden;
  background: #fff;
  border-radius: 0 0 3px 3px;
  padding-top: 30px;
  z-index: 100;
}

现在，在 Google Chome 上，当我 hoverOut() 时，该元素在布局上保持其空间......并且它之后的元素不会跳回原位。 (这适用于 Firefox)

如果我在我的开发工具上更改任何布局值，就会触发回流，一切看起来又正常了。

我注意到如果我不使用 fadeOut 而使用 slideDown/slideUp 问题就解决了，但这不是我需要的效果。

似乎使用 fadeOut() 将元素设置为 display: none，行为更像 visibility: hidden。

Answer 1

我检查了 Firefox 33 和 Chrome 38 上的问题，并且在我从 JS 中删除了 position: absolute 之后(就像你提到你希望元素随所有内容一起流动)，它运行良好。

您说您正在使用 mousehover 事件，但这并不存在，所以您可能指的是 mouseover jquery 事件。如果围绕这一点没有语法上的混淆，您可以检查您的代码。

这是我根据您的代码和解释使用的简化 javascript :

function hoverIn() {
    $('.paddle-mega-dropdown').fadeIn("fast");
}
function hoverOut(e) {
    $('.paddle-mega-dropdown').fadeOut("fast");
}
$('#hover-this').mouseover(hoverIn);
$('#hover-this').mouseleave(hoverOut);

我还创建了一个 jsfiddle demo因此您可以检查以上内容在 Firefox 和 Chrome 中是否有效。