如何使用切换（'慢'）使其更平滑

我有以下代码可以工作，但在每次切换操作结束时会变得有点跳跃。如何使用切换（'慢'）使其更平滑

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

我正在尝试获取该段落，但我不知道该怎么做。

任何人都可以帮助我吗？

在此先感谢。

<head> 

<style type="text/css"> 
body {width: 660px; margin: 0 auto; } 
.toppara{ 
background-color: #FF9; 
} 
.morepara { 
background-color: #fff; 
display:none; 
} 

.togglebutn { 
color: #900; 
background-color: #FFF; 
} 

</style> 

</head> 

<body> 

<div id="section1"> 
<div class="toppara"><p>Content 1.</p> 

</div> 

<div class="morepara"> 
<p> 
Content 2. 
</p> 

</div> 

<p class="togglebutn"> 
<a>Show/Hide</a> 
</p> 
</div><!-- section 1 --> 

<!-- section 2 --> 
<div id="section2"> 
<div class="toppara"><p>Content 3.</p> 
</div> 


<div class="morepara"> 
<p> 
Content 4. 
</p> 


</div> 

<p class="togglebutn"> 
<a>Show/Hide</a> 
</p> 
</div><!-- section 2 --> 

<script language="javascript" type="text/javascript"> 
$(function() { 
    $('.togglebutn a').click(    
     function(){ 
     var $parentpara = $(this).parent().prev(); 

     $parentpara.toggle('slow'); 
    }); 

}); 


</script>

来源

2009-06-13 shin

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

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

解决方法是要么删除边缘上p标签，要尽量防止通过给.morepara发生坍塌DIV明确的高度，边框或者一些顶部/底部填充，虽然这两种选择都有不良的副作用效果。

来源

2009-06-13 20:48:41 grahamparks

可以使用.children('p')为了从< DIV>访问< P>，但我建议你尝试.slideToggle('slow')方法，而不是.toggle，仍然把它应用到< div>元素。一般来说，它适合你期望的事情。

来源

2009-06-13 13:13:41 stanch

我在上面的代码中添加了.children（'p'）。 var $ parentpara = $（this）.parent（）。prev（）。children（'p'）; 但这不起作用。有什么想法？ – shin 2009-06-13 14:11:55

嗯，我只是指出了一种访问该段落的方法。我不确定这是否是平滑动画的一种方式。此外，你必须反正.toggle div。 Personnaly我再一次建议你试试.slideToggle这个东西。检查网页 - 隐藏的段落经常滑动，而不仅仅是切换。 – stanch 2009-06-13 14:19:21

我不确定是什么导致了抖动。我的猜测是，当div的显示属性从'none'更改为'block'时，将该段落装入div是一种效果。我已经应用了stanch的建议，并提出了一个看起来更好一点的工作示例。

<html> 
<head> 
<style type="text/css"> 
body {width: 660px; margin: 0 auto; } 
.toppara{ 
background-color: #FF9; 
} 
.morepara { 
background-color: #fff; 
} 

.togglebutn { 
color: #900; 
background-color: #FFF; 
} 

</style> 

</head> 

<body> 
    <div id="section1"> 
     <div class="toppara"> 
      <p>Content 1.</p> 
     </div> 
     <div class="morepara"> 
      <p> 
      Content 2. 
      </p> 
     </div> 
     <p class="togglebutn"> 
      <a>Show/Hide</a> 
     </p> 
    </div> 

    <div id="section2"> 
     <div class="toppara"> 
      <p>Content 3.</p> 
     </div> 
     <div class="morepara"> 
      <p> 
      Content 4. 
      </p> 
     </div> 
     <p class="togglebutn"> 
      <a>Show/Hide</a> 
     </p> 
    </div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$('document').ready(function(){ 
    $('.morepara p').hide(); 
    $('.togglebutn a').click(
     function(){ 
      var parentpara = $(this).parent().prev().children(); 
      parentpara.toggle('normal'); 
     } 
    ); 
}); 
</script> 
</body> 
</html>

来源

2009-06-13 15:40:35 converter42

不知道如果你有这个答案，但给予正在切换特定宽度的DIV实际上为我工作。签入FF & IE 7-8

来源

2009-11-12 04:06:11 hollywood3224

如何使用切换（'慢'）使其更平滑

回答

相关问题