Question

我遇到了jQuery slidingown和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>

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

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

jquery滑块上下

2 个答案: