jQuery 动画宽度而不回流内容？

Question

我在这里搜索并用谷歌搜索了几个小时，但还没有找到这个问题的解决方案...基本上，我有一个巨大的图标列表，一旦每个列表项悬停，它就会展开以显示文本名称的项目。但是，在对宽度进行动画处理后，整个文档将被迫重排。

有什么办法可以解决这个问题吗？我已经尝试了所有我能想到的 jQuery 和 css 组合，但都无济于事。我曾尝试添加绝对定位(相对于父 UL)，一旦悬停在基于 jQueryposition() 的位置上...但是，这并不像我希望的那样工作。

我真的很希望能够悬停每个图标，让它展开以显示文本，但不是重排其余内容，而是简单地表现得好像它位于固定位置，因此不与其余内容布局。

这是动画部分:

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

此外，我认为实际标记的 View 可能会有所帮助，因此您可以:

<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 标记内。然后，当它们悬停时，调整绝对定位的灰色边框 div 的宽度。您可能还需要在鼠标悬停/鼠标移出时调整 z 索引以控制重叠。