在 slideUp 期间避免文本换行？

Question

我的目标是创建一个简单的滑动动画，按下按钮时 show/hide 一段文本。请参阅下面的 jsfiddle。还有一个缩略图，它总是可见的，文本环绕在它周围。现在，当我使用 jQuery slideUp 隐藏文本时，文本的环绕首先发生变化（好像 overflow 被临时设置为隐藏），然后动画运行。具体来说，在下面的示例中，文本在消失之前向右移动到一个窄列中。如何实现文本在动画过程中完全不动？我想要的只是它从下到上消失，没有重新包装。

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>

在 slideUp 期间避免文本换行？

Avoid text wrapping during slideUp?

jquery

slideup