1

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.

NightMICU
  • 9,000
  • 30
  • 89
  • 121
  • Which browser are you seeing the issue? Only thing I can think of, is to add an easing function. – RestingRobot Mar 21 '12 at 23:16
  • 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`. Try wrapping your actual content into a container div and/or giving it a fixed height to see whether the animation runs smoothly then. – vzwick Mar 21 '12 at 23:17
  • IE 9, latest versions of Chrome and Firefox. The thing that has me the most puzzled is that it runs flawlessly in jsFiddle – NightMICU Mar 21 '12 at 23:18
  • It jumps for me in both the JSFiddle and your example. I'm using Chromium 17. – Bojangles Mar 21 '12 at 23:18
  • change fast to slow in jsfiddle and you can see its jumps – safarov Mar 21 '12 at 23:23

2 Answers2

3

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.

vzwick
  • 11,008
  • 5
  • 43
  • 63
  • LOL, was heading down a similar path before you edited.. see my new link.. thanks! Trying this now – NightMICU Mar 21 '12 at 23:35
  • Actually, I've never used `data` before - could you give me an example for this type of situation? – NightMICU Mar 21 '12 at 23:43
  • Setting data: `$('#someid').data('actualheight', $('#someid').innerHeight());` Reading data: `var targetheight = $('#someid').data('actualheight');` – vzwick Mar 21 '12 at 23:54
  • Just had a massive lightning storm roll through the area, back to fiddling.. Edit 3 looks about the same, trying out the other suggestion (Edit 1) – NightMICU Mar 22 '12 at 00:12
  • Got me on the right track, thanks! See edits - looks pretty smooth now – NightMICU Mar 22 '12 at 00:47
-1

The jQuery Easing plugin may help.

FreeCandies
  • 1,088
  • 10
  • 21