jquery slider up and down

Question

I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?

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

<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

The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.

For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:

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

And JS like:

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

This way, the browser is only animating one element at a time - much faster!

Answer 2

Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:

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