jquery滑块上下

Question

我在使用 jQuery 向下滑动和向上滑动功能时遇到问题。单击按钮时，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>

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>

Answer 1

不确定是否可以解决您的问题，但只是为了一个好的做法，将您的选择存储在变量中并使用它们，这样 jQuery 就不需要在每次调用切换函数时查找元素：

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

Answer 2

问题在于性能之一 - 尝试一次为多个元素设置动画时，浏览器可能会陷入困境，尤其是当这些元素导致文档为“reflowed”时。本质上，您的选择器 $('.inner p:gt(2)') 导致所有 <p> 元素独立动画，并且每个元素都会在每个点导致文档重排。

为了平滑过渡，请尝试为单个包含元素设置动画，该元素包含您想要显示/隐藏的所有内容。我会使用 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>

和 JS 一样：

$(".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");
    }
);

这样，浏览器一次只为一个元素设置动画 - 速度更快！