如何使切换更平滑('慢')

Question

如何使切换更平滑('慢')

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

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

我试图得到段落,但我不知道该怎么做.

有人可以帮我吗？

提前致谢.

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

gra*_*rks 5

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

您的问题是由p标记上的边距引起的,该边距占用JQuery原始估计中的空间,但在动画完成时会折叠.

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

归档时间：	16 年，6 月前
查看次数：	8663 次
最近记录：	16 年，1 月前