gpt4 book ai didi

jquery - 如何通过切换使其更平滑 ('slow' )

转载 作者:行者123 更新时间:2023-12-01 01:05:38 28 4
gpt4 key购买 nike

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

切换段落会不会更流畅?我正在尝试获取该段落,但我不知道该怎么做。

<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 必须猜测元素的最终高度。当出现此错误时,您会在动画结束时看到跳跃,并且允许元素找到其自然高度。

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

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

关于jquery - 如何通过切换使其更平滑 ('slow' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/990622/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com