如何能让它更顺畅与切换（“慢”）

StackOverflow https://stackoverflow.com/questions/990622

  •  13-09-2019
  •  | 
  •  

题

我有以下代码工作，但它成为在每个肘节作用的端部的位跳动。

，会更光滑，如果我切换段？

我试图让这一段，但我不知道该怎么做。

任何人能帮助我吗？

预先感谢。

<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有猜测元件的最终高度。如果放错了，你看到一个跳的时候动画结束和元素让其找到它的自然高度。

您的问题是由在其占用空间JQuery的原来预算p标签边缘造成的，但在动画完成时倒塌。

在解决方案是去除边缘上p标签，要尽量防止从通过给予.morepara发生塌陷DIV显式高度，边框或一些顶部/底部填充，虽然这两种选择具有不希望的副作用

其他提示

您可以为了使用.children('p')访问

从

，但我建议你尝试.slideToggle('slow')方法，而不是.toggle，仍然把它应用到
元素。一般情况下，它非常适合用于这种东西你期望的那样。

我不知道是什么导致抖动。我的猜测是它造成当div的显示属性从“无”到“块”改款装配到DIV的效果。我申请止漏的建议，并拿出似乎更好一点的工作工作的例子。

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

不知道，如果你有一个答案，但尚未给正在切换一个特定的宽度竟为我工作的DIV的。在FF＆IE 7-8检查

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top