Comments on: SlideDown Animation Jump Revisited

By: Bfred

Bfred — Mon, 12 Apr 2010 15:49:32 +0000

Nice post, I came across this problem on this website: http://www.hotelteti.com/a/new/it/listino/ But since the content of that “div” is dynamic this method doesn’t work for me. So apparently this works:


 var height = $(this).hide().html(newContent).height("").show().height();
$(this).height(0).animate({height:height}, {duration:2500});

By: Ben Goevaerts

Ben Goevaerts — Wed, 07 Apr 2010 12:37:05 +0000

@Mike Taylor: Can you give some more info please?

I'm still trying to get more elements in one page ...

Great website btw;

By: Jared Christensen

Jared Christensen — Sat, 13 Mar 2010 08:27:36 +0000

Setting the container div’s position to relative seams to be fixing the width problem for me.

By: Benjamin Welch

Benjamin Welch — Wed, 10 Feb 2010 22:58:42 +0000

Hey Remy,

I'm a freelance web & graphic designer and I just wanted to say that I would have ripped my hair out, squeezed lemon juice into my paper cut eyes and cried like a baby if you hadn't made parts jQuery understandable to a beginner.

Your work is much appreciated. I'll spread the word and if there's anything else I can do to help, let me know.

Thanks again.

By: Jake Moore

Jake Moore — Wed, 20 Jan 2010 08:09:12 +0000

Hey there, This is a great tutorial, and you go into great detail. I love this bit of code you've shown us, but I've found a problem with it. I have other links on my page that jump to certain areas of the page next to my SlideDown link (ex: and ). However, instead of jumping to their respective parts of the page, they all open the SlideDown. Does anyone know how to fix this?

Actually, every link on the page that has a # in it opens the drawer. That is definitely not the desired effect >.<

Thank you,
-Jake Moore

By: Richard

Richard — Wed, 16 Dec 2009 10:20:52 +0000

Thanks for explaining the reasons behind the jumpy animation. It makes sense to me now. I was trying to make a small 'accordian' type plugin when I came across this issue. As I was dealing with multiple blocks, I used data() to store the individual section heights before hiding the sections, and then used that same value for animating the heights. It all works beautifully now without any jumps in the animation. :)

[edit: didn't see previous comments, same solution!]

By: Satinafield

Satinafield — Tue, 03 Nov 2009 16:08:32 +0000

Hi,

Thanks for the great tutorial

I have added the .click function to a check box, which triggers the slide but does not show the tick in the check box, anyone got idea why this is happening?

Thanks

By: Ben Nadel

Ben Nadel — Fri, 30 Oct 2009 15:54:30 +0000

A most excellent tip! I did not know that it changed the position to absolute to calculate the height. I just changed the structure slightly to use a width and the animation jump (for me, it was popping up slightly at the end of the animation) was gone!

Thank you very much.

By: 3dealism

3dealism — Thu, 29 Oct 2009 16:38:16 +0000

Yeah, that Code is nice and works, but what have I to modify to get it work with more than one sliding div without sliding all divs at once???

By: Hilco

Hilco — Tue, 20 Oct 2009 18:35:02 +0000

way to extensive :) just add a width and a padding-bottom of 10px using css.