Fixing vertical jump at end of jQuery slideDown animation

Question

I am new to Jquery but have written a simple vertical accordion. It seems to to the job I require, but at the end of the slide down there is a visible jerk.

If anyone could look at it and suggest a solution, it will stop me pulling any more of my hair out!

Here is a a link to my test page (all my code [css, js etc.] is in one file for ease) : Vertical Accordion

Mural

I had the same problem but ignored it only to finally end up ditching the accordion for another reason; there was a bug with the auto height that kept making it hang off the bottom of the page and be 3 times longer than the div it was contained in - every time a refreshed the page I got a different size accordion... I personally think this particular jQuery control needs a lot more work... – Literalism

jqueryui.com/demos/accordion <- just a suggestion. – Briony

Are you using different browsers for testing? Also, on my FF4Beta7 it jumps a little at the end, except Q7, 8, 9 which are working fine. Seems like it's miscalculating the height of the object. – Infiltrate

Answer 1

In your custom code, I got rid of the 'jump' by making a small change in the CSS and specifying the height of the p tags within the accordion.

Since you hide them all via script, before you do:

$(".accordion p:not(:first)").hide(); 

maybe you could walk through and get the calculated heights of each piece and add that to each items style, thereby eliminating that "jerk" you get at the end.

Something along these lines:

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

Edit

I went ahead and downloaded a copy of your page and tested this, and it seems to work fine in a few quick browser tests, so here's your revised vaccordian.js:

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

TL;DR - by setting an explicit height on each 'opening' part of the accordion, it removes the jerky animation. so we set those heights via script.

Briony

Solved, Thak you for your assistance Erik (your a star in my book) – Mural

Answer 2

For reference in case somebody else comes across this problem, the following worked for me:

.ui-accordion .ui-accordion-content {
    overflow: auto;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

I don't really have time to investigate the details of why this fix works, but thought I'd share anyway.

Stymie

Yes this works for me too. In conjunction with a fixed height for the accordion-html container a get a proper sliding animation without abrupt changes. So I can set margin/padding as required on the accordion elements now without running into problems :) See my fiddle. – Margueritamarguerite

Answer 3

I was able to fix my problem just by using overflow: auto or overflow: hidden. I think this works because it ignores the height of the element and will show whatever it can. As long as there isnt a small height it should be able to show everything but adding the overflow property allows it transition more smoothly because it is not calculating the height.

Babyblueeyes