Javascript jquery上下滑动条

我对jQuery slidedown和slideUp函数有问题。当单击按钮时，div向下滑动以显示更多内容-然而，当它向下滑动时，它会平稳地向下滑动一半，然后像口吃一样-但是当我单击较少的信息以使div恢复时，它会平稳地向上移动。我怎样才能确保它在过渡过程中不受干扰地平稳下滑

<script type="text/javascript">
    $(document).ready(function () {
        // $(".image-gallery ul li:gt(5)").hide(0);
        $(".inner p:gt(2)").hide(0);

        $('a.moreInfoLink').toggle(
            function () {
                $('.inner p:gt(2)').slideDown(1000);
                $(this).text("Less info");
            },
            function () {
                $('.inner p:gt(2)').slideUp(1000);
                $(this).text("More info");
            }
        );
    });
</script>

$（文档）.ready（函数（）{
//$（“.image gallery ul li:gt（5）”）。隐藏（0）；
$（“.inner p:gt（2）”）.hide（0）；
$（'a.moreInfoLink'）。切换(
函数（）{
$（'内部p:gt（2）'）。向下滑动（1000）；
$（此）.text（“较少信息”）；
},
函数（）{
元("内部p:gt(2)),slideUp(1000),；
$（此）.text（“更多信息”）；
}
);
});

HTML/.NET编码

<div class="slideContent">
    <div class="inner">
        <energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
    </div>
</div>
<div class="clear-me"></div>

<div class="btnMoreInfo">
    <a class="moreInfoLink" href="javascript:;">More Information</a>
</div>

---

不确定您的问题是否有解决方案，但只是为了一个良好的实践，将您的选择存储在变量中并使用它们，这样jQuery就不需要在每次调用toggle函数时都查找元素：

<script type="text/javascript">
    $(document).ready(function () {
        // $(".image-gallery ul li:gt(5)").hide(0);
        var content = $('.inner p:gt(2)'); // storing selection
        content.hide(0);

        $('a.moreInfoLink').toggle(
            function () {
                content.slideDown(1000);
                $(this).text("Less info");
            },
            function () {
                content.slideUp(1000);
                $(this).text("More info");
            }
        );
    });
</script>

$（文档）.ready（函数（）{
//$（“.image gallery ul li:gt（5）”）。隐藏（0）；
var content=$（'.internalp:gt（2）；//存储所选内容
内容隐藏（0）；
$（'a.moreInfoLink'）。切换(
函数（）{
内容。向下滑动（1000）；
$（此）.text（“较少信息”）；
},
函数（）{
内容。幻灯片（1000）；
$（此）.text（“更多信息”）；
}
);
});

问题在于性能—浏览器在尝试一次为多个元素设置动画时可能会陷入困境，尤其是当这些元素导致文档为“”时。本质上，您的选择器

$（'.internal p:gt（2）

会使所有

元素单独设置动画，并且每个元素都会导致文档在每个点处回流

为实现平滑过渡，请尝试设置单个包含元素的动画，该元素将包裹要显示/隐藏的所有内容。我会使用HTML，比如：

<div class="slideContent">
    <div class="inner">
        <p>Something</p>
        <p>Something</p>
        <div class="fullInfo">
            <p>Something</p>
            <p>Something</p>
            <p>Something</p>
        </div>
    </div>
</div>

<div class="btnMoreInfo">
    <a class="moreInfoLink">More Information</a>
</div>

---

这样，浏览器一次只为一个元素设置动画，速度要快得多

绝对是个不错的补充。如果可以的话，您也应该尽量避免使用裸类选择器。$（'div.inner'）比我使用的$（'inner'）快得多-需要重新组织它一点，并且工作得很好。我将元素存储在一个变量中，并使用div.inner更快地加载它。使它更容易理解

$(".inner .fullInfo").hide(0);

$('a.moreInfoLink').toggle(
    function () {
        $('.inner .fullInfo').slideDown(1000);
        $(this).text("Less info");
    },
    function () {
        $('.inner .fullInfo').slideUp(1000);
        $(this).text("More info");
    }
);