slideToggle jumpy at end (even with padding: 0)

[plong0]

Hello,

So I'm working with a pretty simple list of div's.  Each div has an
h2, and at least one paragraph, plus a hidden span, and a "show more"
link that slideToggle()'s the hidden span when clicked.

The problem I'm having is that the hidden span appears to jump a few
pixels near the end of the animation.

After doing some research, it appears this type of jumpiness is
typically caused because of issues with padding.  However, my element
has no padding on it! But I still can't seem to get the animation to
be nice and smooth right through to the end?

This behavior is in FF and Safari (on Mac), and I'm guessing I'd
probably see it in all other browsers too.

The source in question is online at: http://tangibleinteraction.com/v3_static_mockup/

Click the "(+) Learn more" links in the left column to see what I
mean.

Hopefully someone out there has seen something like this before and
can help....

Cheers!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to jquery-dev@...
To unsubscribe from this group, send email to jquery-dev+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

[etienned-2]

Hi,

I'm fighting with this problem right now. For more information read my
post on Stack Overflow:
http://stackoverflow.com/questions/1335461/jquery-slide-is-jumpy

Short answer:
remove top and bottom margins to every block elements (mostly P for
you) inside your hidden DIV (<div class="more"> in your case).

It will be great if one of the developer can give us more advice on
this problem.

Thanks

On Aug 25, 2:45 pm, plong0 <plon...@...> wrote:

> Hello,
>
> So I'm working with a pretty simple list of div's.  Each div has an
> h2, and at least one paragraph, plus a hidden span, and a "show more"
> link that slideToggle()'s the hidden span when clicked.
>
> The problem I'm having is that the hidden span appears to jump a few
> pixels near the end of the animation.
>
> After doing some research, it appears this type of jumpiness is
> typically caused because of issues with padding.  However, my element
> has no padding on it! But I still can't seem to get the animation to
> be nice and smooth right through to the end?
>
> This behavior is in FF and Safari (on Mac), and I'm guessing I'd
> probably see it in all other browsers too.
>
> The source in question is online at:http://tangibleinteraction.com/v3_static_mockup/
>
> Click the "(+) Learn more" links in the left column to see what I
> mean.
>
> Hopefully someone out there has seen something like this before and
> can help....
>
> Cheers!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to jquery-dev@...
To unsubscribe from this group, send email to jquery-dev+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

[plong0]

Hey... so after much detective work and trying things out, I have
solved the problem :D

The problem was that I was starting my sliding divs with a
display:none; property.  This was messing up jQuery's height
calculations.  Took me forever to find what the problem was, but then
the solution was pretty simple.

I added this to my $(document).ready() function:

[code]
                                $("div.more").each(function(){
                                        $(this).css("height", $(this).height()+"px");
                                        $(this).hide();
                                });
[/code]

So, basically what that does is calculates the height (while the
element is visible), and saves it into the element's style.  Then
after the value has been saved, we hide the element.

Works like a charm!



On Aug 25, 11:45 am, plong0 <plon...@...> wrote:

> Hello,
>
> So I'm working with a pretty simple list of div's.  Each div has an
> h2, and at least one paragraph, plus a hidden span, and a "show more"
> link that slideToggle()'s the hidden span when clicked.
>
> The problem I'm having is that the hidden span appears to jump a few
> pixels near the end of the animation.
>
> After doing some research, it appears this type of jumpiness is
> typically caused because of issues with padding.  However, my element
> has no padding on it! But I still can't seem to get the animation to
> be nice and smooth right through to the end?
>
> This behavior is in FF and Safari (on Mac), and I'm guessing I'd
> probably see it in all other browsers too.
>
> The source in question is online at:http://tangibleinteraction.com/v3_static_mockup/
>
> Click the "(+) Learn more" links in the left column to see what I
> mean.
>
> Hopefully someone out there has seen something like this before and
> can help....
>
> Cheers!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to jquery-dev@...
To unsubscribe from this group, send email to jquery-dev+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

[etienned-2]

Wow! That did the trick for me either for one of my problem.

Still have to use padding instead of margin on an outside container
div and that mess with my layout.

Thanks

On Aug 26, 2:45 pm, etienned <etienne.desaut...@...> wrote:

> Hi,
>
> I'm fighting with this problem right now. For more information read my
> post on Stack Overflow:http://stackoverflow.com/questions/1335461/jquery-slide-is-jumpy
>
> Short answer:
> remove top and bottom margins to every block elements (mostly P for
> you) inside your hidden DIV (<div class="more"> in your case).
>
> It will be great if one of the developer can give us more advice on
> this problem.
>
> Thanks
>
> On Aug 25, 2:45 pm, plong0 <plon...@...> wrote:
>
> > Hello,
>
> > So I'm working with a pretty simple list of div's.  Each div has an
> > h2, and at least one paragraph, plus a hidden span, and a "show more"
> > link that slideToggle()'s the hidden span when clicked.
>
> > The problem I'm having is that the hidden span appears to jump a few
> > pixels near the end of the animation.
>
> > After doing some research, it appears this type of jumpiness is
> > typically caused because of issues with padding.  However, my element
> > has no padding on it! But I still can't seem to get the animation to
> > be nice and smooth right through to the end?
>
> > This behavior is in FF and Safari (on Mac), and I'm guessing I'd
> > probably see it in all other browsers too.
>
> > The source in question is online at:http://tangibleinteraction.com/v3_static_mockup/
>
> > Click the "(+) Learn more" links in the left column to see what I
> > mean.
>
> > Hopefully someone out there has seen something like this before and
> > can help....
>
> > Cheers!

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to jquery-dev@...
To unsubscribe from this group, send email to jquery-dev+unsubscribe@...
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---