Problem with jerky animation in jQuery

Question

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").stop(true, true).animate(
        { height: 'toggle' }, 
        {
            duration: 1000,
        });
    })
});

Orlop

I'm not seeing a problem: jsfiddle.net/azjUT Ah-- just noticed your link and there is a problem there. I think it must be an intersection with some other CSS as there isn't any problem when just this code is used alone. – Daph

Answer 1

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.

Orlop

do you mean visibility:hidden ? – Blankenship

Answer 2

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. :)

Polley

Answer 3

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

Indihar

thx for your answer tvanfosson. unfortunately with all my external css disabled the problem persist. motionman95 read desription completly. the problem is the same with slideToggle and slideDown. duration has no change on the problem. – Orlop

Answer 4

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.

Offen