Search code examples
jqueryjquery-effectsjquery-slide-effects

Hesitation in animation with jQuery slideToggle

I am trying to do a simple jQuery slideToggle() on a DIV containing text and have found the animation to be very sluggish (seems to hesitate) as the slideDown animation nears the bottom of the sliding DIV.

Code and example of this may be found here. I have tested on several computers and all modern versions of the popular browsers, all behave the same way. Strangely, when I run the exact same page in jsFiddle, it is smooth.

Any ideas?

UPDATE

Part of this seems to be, like someone else suggested, that jQuery does not know the height of the sliding DIV before the animation runs. Since the content in the sliding DIV will be dynamic and either very short or somewhat long, neither do I. So, I tried grabbing the height of the DIV prior to hiding it with jQuery and then setting the CSS height accordingly. Made for a somewhat smoother animation but probably not the best solution - demo

UPDATE 2

It would appear that the problem was due to several CSS issues with the initial example. First, way too many DIVs. Second, the sliding DIV had padding set - does not play well with toggleSlide, and finally, the sliding DIV was in a container DIV that also contained the #control-container (button) DIV.

Reducing the DIVs down to two (outer DIV for the sliding element and the sliding DIV itself) and not setting the outer sliding DIV padding seemed to do the trick - final example.

Solution

  • Blatant Karmaw***g just in case I'm on the right track ;)

    I'm on My iPhone right now so I can't verify my assumption - but I have encountered similar quirks before when animating elements with padding and/or margin properties and height:auto.

    jQuery seems to have a hard time determining the actual height before animating under these circumstances.

    Try wrapping your actual content into a container div and/or giving it a fixed height to see whether the animation runs smoothly then.

    Edit 1:

    Another workaround I remember using:

    • Do not hide the element via CSS
    • On domready, determine element's height via jQuery and assign it to the element via data(), then set element's height to 0 and overflow:hidden
    • Instead of slideToggle(), use animate() with the height saved before.

    Fugly, but does the trick.

    Edit 2:

    A related issue (and a workaround) are described here

    Edit 3:

    Does this fiddle work for you, by any chance? Added Container with padding - excuse the bad formatting, jsfiddle's no fun on the iPhone.