jQuery动画宽度没有内容回流？

Question

我在这里搜索了几个小时，但还没有找到这个问题的解决方案……基本上，我有一个巨大的图标列表，一旦每个列表项被悬停，它就会展开以显示该项的文本名称。但是，在设置宽度动画时，会强制重排整个文档。

有什么办法可以解决这个问题吗？我尝试了所有我能想到的jQuery和css的组合，但都没有用。我曾经尝试添加绝对定位(相对于父UL)，并根据jQuery position()...然而，这并不像我希望的那样工作。

我真的希望能够悬停每个图标，让它展开以显示文本，而不是回流其余内容，简单地表现为它处于固定位置，因此不与内容布局的其余部分交互。

这是动画片段：

  $('.service-generator li').hover(function() {
    var labelWidth = $(this).children('label').width() + 41;
    $(this).animate({width: labelWidth + 'px'}, 180);
  },
  function() {
    $(this).animate({width: '35px'}, 180);
  });

此外，我认为实际标记的视图可能会有所帮助，因此您可以这样做：

<ul class="service-generator">
  <li id="[service-name]" class="full-service-wrapper photo">
    <label class="icon-name" for="[service-name]-checkbox">[service-name]</label>
    <div class="icon-wrapper">
      <input type="checkbox" checked="checked" name="[service-name]" id="[service-name]-checkbox"><img alt="[service-name]" title="[service-name]" src="[service-name].ico">
    </div>
  </li>
</ul>

这是一张显示结果的图片：

​

Answer 1

这样做的方法是让你的灰色圆角边框div容器绝对定位在li标记中，并带有position relative。然后，在绝对定位的灰色边框div悬停时调整它们的宽度。您可能还需要在mouseover/mouseout上调整z索引，以控制重叠。