Problem with sharp animations in jQuery

Question

I have done this several times without problems, but for some reason this is a problem on Here . A slide down will start working (1/3) in normal mode and, than a sudden jerk, and end the animation. The slide show works great. this is the case for slideDown (), slideToggle and .animate (), it is strange if I also switch the opacity to the animation function, it does not twitch, but my text will change color for a short time.

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 also read that these fields can be annoying, but that doesn't help

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

Answer 1

I have found a solution. this had nothing to do with my code, but a bug in jquery. jquery has problems getting height if it is inherited, because when it gets height, the element is hidden. when elements are hidden, they are processed by css properties

 position: absolute; visibility: hidden; 

to fix this, you need to specify a height in the animation, which is not feasible in my case, since I have many that switch. an alternative is to set the height of the elements. I personally added a note in my jQuery about this and did it all in order, just adding

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

for switchable items.

Answer 2

I had a similar problem when animating division from 100% to 0%.

What happened was that at the beginning of the animation, the unit became something like 110% for some reason.

In any case, I found a solution to add max-width: 100%; CSS styles in a specific unit.

Just thought that I would post this here when I came here to find a solution to this problem. :)

Answer 3

Have you tried to increase the number of {duration: ...} ? Alternatively, you can simply use the built-in jQuery function . SlideToggle () .

Answer 4

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

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

However, it was covered by the devs kernel and it seems that it will not be fixed if there is no patch that has no performance flaws.

At the same time, if you still want to use jQuery for this, you can either set the height or width of the element you are trying to perform slideUp or slideDown. It should not be in the block "pixel", it can also be a percentage.