Skip to main content

Search and Top Navigation

#9223 closed bug (worksforme)

Opened April 12, 2013 10:59AM UTC

Closed April 12, 2013 11:31AM UTC

Last modified April 12, 2013 01:48PM UTC

Child elements do not animate correctly when using animateClass (addClass, removeClass, toggleClass, switchClass)

Reported by: BenEllis Owned by:
Priority: minor Milestone: none
Component: ui.effects.core Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:
Description

http://jsfiddle.net/BenEllis/gUG4H/

reproduced in IE9, Firefox 19.02, Chrome 26.0.1410.64 m in 64-bit Windows 7 Enterprise

Child elements are not being animated when using the animatedClass feature. e.g.

addClass('myclass', 500);
removeClass('myclass', 500);
toggleClass('myclass', 500);
switchClass('myclass', 500);

I believe this is down to this line of code in jquery-ui-1.10.1,

allAnimations = o.children ? animated.find( "*" ).addBack() : animated;

o.children is always undefined as it is the return value from the $.speed call, I believe this should probably be,

allAnimations = animated.children().length > 0 ? animated.find("*").addBack() : animated;

however, the animation can be slow for elements with a large number of children.

The best fix would be to probably identify which elements would be affected by adding the class to the root element and only animating those elements.

A quick fix is to add a childSelector argument to only animate those children defined by the calling client code, this is a bit of a smell but is probably the best solution for performance.

Attachments (0)
Change History (4)

Changed April 12, 2013 11:00AM UTC by BenEllis comment:1

I have a patch for this which I will submit shortly.

Changed April 12, 2013 11:05AM UTC by BenEllis comment:2

My sample was incorrect, please use http://jsfiddle.net/BenEllis/gUG4H/1/ instead.

Changed April 12, 2013 11:31AM UTC by scottgonzalez comment:3

resolution: → worksforme
status: newclosed

The code is correct. You need to pass an options hash to use the children option: http://jsfiddle.net/gUG4H/2/

See https://github.com/jquery/api.jqueryui.com/issues/101 for the documentation issue.

Changed April 12, 2013 01:48PM UTC by BenEllis comment:4

The performance of this seems quite slow when there are many children, I raise a separate ticket (#9226) to address performance by adding a filter parameter or calculating which children are affected by the CSS class.