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