如何使用切换(“慢")使其更平滑 [英] How to make it smoother with toggle ('slow')
问题描述
我有下面的代码可以工作，但是在每次切换操作结束时，它都会显得有些跳动.
I have the following code which works but it becomes a bit jumpy at the end of each toggle action.
如果我切换段落会更流畅吗?
Will it be smoother if I toggle the paragraph?
我正在尝试获取该段落，但我不知道该怎么做.
I am trying to get the paragraph, but I don't know how to do it.
有人可以帮我吗?
谢谢.
<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>
推荐答案
为了向下滑动，JQuery必须猜测元素的最终高度.如果出现此错误，动画结束时您会看到一个跳转，并且允许该元素找到其自然高度.
For sliding down to work JQuery has to guess the eventual height of the element. When it gets this wrong you see a jump when the animation ends and the element is allowed to find its natural height.
您的问题是由p标记上的页边距引起的，该页边距在JQuery的原始估计中占据了空间，但是在动画完成时被折叠.
Your problem is caused by the margins on the p tag which take up space in JQuery's original estimate, but are collapsed when the animation completes.
解决方案是删除p标记上的边距，以尝试通过给.morepara div显式的高度，边框或某些顶部/底部的填充来防止折叠的发生，尽管这两个选项都不理想.副作用.
The solution is to either remove the margins on the p tags, to try to prevent the collapsing from happening by giving the .morepara div an explicit height, a border or some top/bottom padding, though both options have undesirable side effects.
这篇关于如何使用切换(“慢")使其更平滑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
