Избегать переноса текста во время слайда?

Question

Моя цель - создать простую скользящую анимацию, которая будет показывать / скрывать абзац текста при нажатии кнопки. Смотрите jsfiddle ниже. Существует также миниатюрное изображение, которое всегда видно, и вокруг которого оборачивается текст. Теперь, когда я использую jQuery slideUp, чтобы скрыть текст, сначала изменяется обтекание текста (как если бы переполнение было временно скрыто), а затем запускается анимация. В частности, в приведенном ниже примере текст перемещается вправо в один узкий столбец перед исчезновением. Как я могу добиться, чтобы текст не двигался вообще во время анимации? Все, что я хочу, - это то, что оно исчезает снизу вверх, без повторной упаковки.

Код JQuery:

$("div.thumbnail").click(function () {
    $("p").slideToggle();
});

Полный пример в jsfiddle (нажмите на квадрат, чтобы переключить слайд): http://jsfiddle.net/p2mxp5ec/4/

Спасибо!

Answer 1

Возможно, вам придется обернуть весь ваш контент в контейнер и создать ложную миниатюру.

$("div.thumbnail").click(function() {
  $(".thumbTextContainer").slideToggle();

});

 div.pseudoThumbnail {
   width: 100px;
   height: 100px;
   border: 2px solid;
   float: left;
 }
 .thumbnail {
   width: 100px;
   height: 100px;
   border: 2px solid;
   position: absolute;
 }
 .container {
   position: relative;
 }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="thumbnail"></div>

  <div class="thumbTextContainer">
    <div class="pseudoThumbnail"></div>
    <p class="myText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac velit gravida odio bibendum molestie. In tristique libero et ante interdum, sit amet vestibulum massa lacinia. Mauris massa neque, congue eget nisl sit amet, lacinia consequat metus.
      Duis euismod turpis nec accumsan hendrerit. Cras fermentum placerat massa at imperdiet. Pellentesque vulputate fringilla nulla quis lobortis. Curabitur luctus neque leo, eu porttitor tortor iaculis eu. Vivamus rhoncus consequat egestas. Nam eu odio
      vitae ligula commodo congue at in risus. Nunc id efficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac velit gravida odio bibendum molestie. In tristique libero et ante interdum, sit amet vestibulum massa lacinia. Mauris
      massa neque, congue eget nisl sit amet, lacinia consequat metus. Duis euismod turpis nec accumsan hendrerit. Cras fermentum placerat massa at imperdiet. Pellentesque vulputate fringilla nulla quis lobortis. Curabitur luctus neque leo, eu porttitor
      tortor iaculis eu. Vivamus rhoncus consequat egestas. Nam eu odio vitae ligula commodo congue at in risus. Nunc id efficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac velit gravida odio bibendum molestie. In tristique
      libero et ante interdum, sit amet vestibulum massa lacinia. Mauris massa neque, congue eget nisl sit amet, lacinia consequat metus. Duis euismod turpis nec accumsan hendrerit. Cras fermentum placerat massa at imperdiet. Pellentesque vulputate fringilla
      nulla quis lobortis. Curabitur luctus neque leo, eu porttitor tortor iaculis eu. Vivamus rhoncus consequat egestas. Nam eu odio vitae ligula commodo congue at in risus. Nunc id efficitur nisl.
    </p>
  </div>
</div>