Problem with jerky animation in jQuery

Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate() strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.

HTML:

<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
    <p>
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
    </p></div>

CSS: i read else were that margins can cause the jerkiness but this isnt helping

    h2{color:#76DEFC; margin:0px;}
    .yamikowebsToggler{margin:0px;}
    p{margin:0px; color;#000000;}

JQUERY:

$(document).ready(function(){
    $(".yamikowebsToggler").fadeOut(0);
    $("h2").click(function()
    {
        $(this).next(".yamikowebsToggler").s开发者_运维百科top(true, true).animate(
        { height: 'toggle' }, 
        {
            duration: 1000,
        });
    })
});

I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of

position: absolute;
visibility: hidden;

to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding

style="height: <height in px>;"

to the elements being toggled.

I had a similar issue when animating a division from 100% down to 0% width.

What was happening was that at the start of the animation the division got wider to like 110% for some reason.

Anyway I found the solution was to add max-width: 100%; in the CSS styles on the specific division.

Just thought I'd post that here as I came here looking for a fix to this issue. :)

Have you tried increasing your {duration: ...}? Also, you could just use the built-in jQuery function .slideToggle().

I know this is marked as answer, but would like to provide an update on this issue.

The corresponding issue ticket is here: http://bugs.jquery.com/ticket/4541

However it's been closed by core devs, and seems like it won't be fixed unless there's a patch that has no performance flaws.

In the mean time, if you still wish to use jQuery to do this, you can either set the height or the width of the element you're trying to slideUp or slideDown. It doesn't have to be in "pixel" unit, it can be in percentage as well.