jQuery滑动效果在后台移动文本

Question

我需要显示一些项目，如果点击这些项目必须隐藏。我使用下面的脚本尝试了相同的内容：

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").css("color", "red")
        .slideUp(2000)

    });
});
</script>

但问题是，当按钮重叠/滑过文本时，会感觉文本也会向上移动。

  

如何限制文本的相同移动？

同样的演示实现是here。

由于

Answer 1

这一切都是因为p有余量，而slideUp随着元素高度的减少而减少。 |这会导致你的效果，所以你只需要添加css

p{
  margin: 0;
}

一切都会好的

Fiddle

Answer 2

文本的上滑是由p的边距或填充引起的。如果将这些设置为0，则文本不会移动：

p {margin:0; padding:0;}

Example