Search jQuery

jQuery Forum

Using jQuery

choroomi

animate performance with large amount of elements

in Using jQuery • 10 years ago

Hi,

I want to use animate function in a page that has more than 3000 elements in it. (they are images or divs)

But the animate function works for 200 elements max. I've tested it in 5 different browsers.

How can I use it for a larger amount of elements in the page.

Regards,

Amin

Replies(5)

jakecigar

Re: animate performance with large amount of elements

10 years ago

What animation are you running that bogs down the browser? I guess anything times 3000 would clobber most browsers. There may be CSS animations that could take take part of the load.

JΛ̊KE

choroomi

Re: animate performance with large amount of elements

10 years ago

Actually its not a special animation, moving and resizing. I've narrowed it down to a simple animation as move about 100px to the left.

But it seems when elements count goes more than 200 the animate function even for one element gets slow. I've tested the transition css3 style, it was better but still not acceptable.

Have u seen the Microsoft Silverlight Pivot Viewer? I'm trying to create something similar with jQuery. But I'm beginning to decide to give up cuz of performance :(

jakecigar

Re: animate performance with large amount of elements

10 years ago

Can you move a parent element instead of the individual elements? Without seeing the page I can only guess if it is doable.

JΛ̊KE

PS moving and resizing an image is less intense than a <div> of elements.

choroomi

Re: animate performance with large amount of elements

10 years ago

Thanks JΛ̊KE for taking time to answer my question.

I can send the complete project to if it helps,

but the main idea is that u have a tile for each record of database (Product for example).

tis tiles are arranged simply next to each other.

when user filters products by color ( user selects RED) then all the blue, green, etc. product tiles go away from the page or simply fadeout.

when user selects blue color, the red tiles go away and blue tiles come back to the page.

if u take a look to this page u'll get what i'm talking about:

http://www.microsoft.com/silverlight/pivotviewer/

Amin

jakecigar

Re: animate performance with large amount of elements

10 years ago

Sounds like you are modifying 3000 absolutely positioned elements, instead of just animating away the width of the ones to hide. If you position the elements inline, they would just flow into place.

Silverlight just craps out on my machine, so I can’t see exactly what it looks like.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

animate performance with large amount of elements

Replies(5)

Re: animate performance with large amount of elements

Re: animate performance with large amount of elements

Re: animate performance with large amount of elements

Re: animate performance with large amount of elements

Re: animate performance with large amount of elements

Statistics

Tags

Actions

Related Posts