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>

在slideUp期间避免文本换行？

1 个答案: