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-индексы также при наведении курсора мыши, чтобы контролировать перекрытие.