animated addClass with many children is slow

[BenEllis]

As per this example,

​http://jsfiddle.net/gUG4H/2/

When using

$('div.outer').addClass('myanimatedclass', {
    children: true,
    duration: 1000
});

if div.outer has many children the performance is slow, this appears to because the animateClass method uses the "any element" selector "*". Could this either only select children affected by the adding of the class, or, allow a selector to be passed in to select the children?

e.g.

$('div.outer').addClass('myanimatedclass', {
    children: true,
    childSelector: 'div.inner',
    duration: 1000
});

[BenEllis]

I've changed

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

to

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

in my working copy for now.

[Scott González]

We already calculate the style differences, so only the elements that need to animate will animate. Adding a selector for the descendants doesn't seem like a good idea. It will surely lead to confusing "errors" when new descendants are expected to be animated.

Can you create an example showing a sane use case where this is a concern? Accepting a selector really just seams like a trap for your future self.

[BenEllis]

​http://jsfiddle.net/BenEllis/4Gwe9/

1000 elements, freezes my browser for a couple of seconds before starting the animation.

in this case, I could just use children: false but if I want just one of those child elements to animate as well then it would be very slow.

[BenEllis]

In my working copy with the change I mentioned, there is no freeze before the animation starts.

[BenEllis]

I admit my change is a bad design.

It would be better if all the CSS rules that apply to the class could be collected and used to create a selector of the children.

[Scott González]

Replying to BenEllis:

​http://jsfiddle.net/BenEllis/4Gwe9/

1000 elements, freezes my browser for a couple of seconds before starting the animation.

in this case, I could just use children: false but if I want just one of those child elements to animate as well then it would be very slow.

Sounds like you don't have a use case to present.

[BenEllis]

The sample was displaying the pause before the animation starts,

My use case is I'm displaying a conversation history (100s - 1000s of lines) and the user wants the ability to minimize, restore and maximize the view. Other controls inside the container change size.

Below is a contrived example of what I'm trying to achieve,

​http://jsfiddle.net/BenEllis/4Gwe9/3/

[Scott González]

#9227 is a duplicate of this ticket.