使用jQuery的slideToggle时，元素跳动问题

Question

首先，#metext_hiddentext文本在您按下#btn_more_metext按钮之前是隐藏的，然后height: 50%将被height: auto覆盖。

jQuery：

<script type="text/javascript">
    $( document ).ready(function() {
        $('#metext_hiddentext').hide();
        $('#btn_more_metext').click(function(){
            $('#me').css( "height", "auto" );
            $('#metext_hiddentext').slideToggle('slow');
        });
    });
</script>

html:

<div id="me">
    <div id="me_content">
     <div id="meimg"></div>
     <div class="metext">
      <h1>I'm Lazor Zombie</h1>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <div id="metext_hiddentext">
      <h2>Lorem ipsum dolor sit amet.</h2>
     </div>
     <div id="btn_more_metext">...</div>
    </div>
</div>

CSS：

#me {
    background: #ff8400;
    height: 50%;
}


#btn_more_metext { 
    font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
    cursor: pointer;
    width: 80px;
    height: 35px;
    line-height: 22px;

}

- Jaakko Uusitalo

---

正如标题所示，问题是如何消除意外跳跃效果。但我已经得到了答案。 - Jaakko Uusitalo

Answer 1

在使用 slideToggle() 时，由于 <h2> 元素有默认的外边距（margin），这会导致视觉上出现“跳动”行为。为了解决这个问题，可以给 <h2> 添加自定义内外边距或者设置 padding:0 和 margin:0。

h2{
   margin:0;
   padding:0;
}

这里是一个演示，带有自定义边距和填充的<h2>标签

- Dhaval Marthak

Answer 2

我认为这里的问题在于，当div进行动画时，它有一个overflow:hidden;属性。而h2标签也有一些margin边距... 所以尝试将h2标签的margin属性移除，并添加到切换的div标签上：

这里是示例链接：http://jsfiddle.net/qk8nq/

#me {
    background: #ff8400;
    height: 50%;
}
#metext_hiddentext {
    margin:1em 0;
}

#btn_more_metext { 
    font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
    cursor: pointer;
    width: 80px;
    height: 35px;
    line-height: 22px;

}
h2 {
    padding:0;
    margin:0;
}

- reyaner

Answer 3

有时可以通过将position: relative添加到容器（在本例中为类名为“metext”的容器）来解决此问题。但我不知道为什么。

- David Ball