- “I'm using the jQuery slideToggle function on a site to reveal 'more information' about something. When I trigger the slide, the content is gradually revealed, but is located to the right by about 100 pixels until the end of the animation when it suddenly jumps to the correct position.”
- “Can anybody tell me why my boxes "jump" when i open them? The first half they slide, the rest they "jump"??”
- “I tried to slide in and out a DIV with the toggle function of jQuery but the result is always jumpy at the start and/or end of the animation.”
In my particular scenario here is my problem:
In a resent prototype I use JQuery slidetoggle function to hide/show a list of items all inside of a parent <div>, the slidetoggle animation works almost fine just that at the end of it, suddenly the animation jumps and recalculate the correct height of the parent <div>, weird doesn’t it?
Still little confuse about the problem, ok, me too!... here is a link to a video that shows the “jump” bug and one of the possible solutions.
That option works, but you need “create” the slidetoggle function by hand, if you don’t want to type extra JS code, here is what you can try first (works in my case):
- Add in your CSS rule or in the style property of the div (the parent div that holds old all the elements) a fix width size in pixels, e.g.: width: 300px; (line 6 in my example)
- C ould not be the best solution for a nice responsive web design, but works.
- OR, instead you can add in your CSS rule or in the style property of the div (the parent div that holds old all the elements) a fix width size in percent (%), e.g.: width: 100%; (line 6 in my example)
- In my opinion is a better solution for a nice responsive web design and you don´t need to add extra JS code lines.
I have created a new post: How to prevent jQuery slidetoggle stop “jumping”? – Part II where I have documented a new solution I have found, in this new scenario none of the above solutions that I had found and shared worked this time.
The new solution involves using the CSS max-height property, check it and see if works in your code.
I hope it is useful!!