如何使切换更平滑（’慢’）

我有以下代码可以工作，但在每个切换操作结束时变得有点跳跃。

如果我切换段落会更顺畅吗？

我试图得到段落，但我不知道该怎么做。

有人可以帮我吗？

提前致谢。

  body {width: 660px; margin: 0 auto; } .toppara{ background-color: #FF9; } .morepara { background-color: #fff; display:none; } .togglebutn { color: #900; background-color: #FFF; }    
 
Content 1.
 
 
 
 Content 2. 
 
 
 Show/Hide 
 
  
 
Content 3.
 
 
 
 Content 4. 
 
 
 Show/Hide 
 
  $(function() { $('.togglebutn a').click( function(){ var $parentpara = $(this).parent().prev(); $parentpara.toggle('slow'); }); });  

Answer 1

为了向下滑动工作，JQuery必须猜测元素的最终高度。 当它出错时，你会在动画结束时看到一个跳跃，并允许元素找到它的自然高度。

您的问题是由p标签上的边距引起的，这些边距占用了JQuery原始估计中的空间，但在动画完成时会折叠。

解决方案是删除p标签上的边距，尝试通过为.morepara div提供明确的高度，边框或一些顶部/底部填充来防止崩溃发生，尽管这两个选项都有不良副作用。

Answer 2

您可以使用.children('p')从

访问

，但我建议您尝试.slideToggle('slow')方法而不是.toggle ，仍将它应用于

元件。 一般来说，它非常适合您期望的那种东西。

Answer 3

我不确定是什么导致了抖动。 我的猜测是当div的display属性从’none’变为’block’时，将段落拟合到div中会产生一种效果。 我已经应用了stanch的建议，并提出了一个似乎工作得更好的工作示例。

      
 
 
Content 1.
 
 
 
 Content 2. 
 
 
 Show/Hide 
 
 
 
 
Content 3.
 
 
 
 Content 4. 
 
 
 Show/Hide 
 
     

Answer 4

不确定你是否对此有了答案，但给予正在切换特定WIDTH的DIV实际上对我有用。 签入FF＆IE 7-8