JQuery animation speed (smoothness) in firefox 4

Question

Hey, I made this site (be patient until there is pre-loading, so it may take a while to download), where you view images (which are full-screen) by clicking left / right, all this is done with hidden overflow and jquery animate + scrollLeft There are now two main problems:

• the overall speed and smoothness of this scroll on the left (this should be fast, since this is not an absolute + left position) in almost all browsers, firefox (4) especially
• the second will be the overall jquery animation speed only in firefox , when you press the "menu", this accordion inside is just ridiculously slow.

now my designer has clearly deprived himself of http://svenprim.com/ of how the guy coded, he is very similar to mine, but his site is very smooth and fast, and I can’t figure out why this is so.

• What I tried, the hidden content was deleted ("menu" and "browse"), so only images will remain - it did not help
• Reduce the number of images - did not help

Any help / advice appreciated, I get desperation.

Answer 1

For everyone who wondered, the problem had nothing to do with javascript itself, the problem was that .photoBox has a gif animation as a background. Firefox doesn't seem to like gifs when scrolling.

You can check that it is pretty fast and smooth.

http://jankaslphoto.com/

You just need to work on this preload (and on web whales, somehow assuming the width is wrong). In any case, thanks for your help, both of you, I will definitely look at this package.

Answer 2

I would use CSS transitions and transforms to animate them where possible.

See http://css3.bradshawenterprises.com/sliding/ for a few demos. Using transformations means that it will be hardware accelerated in iOS and does not require redrawing, so everything happens faster.

I wrote a brief function to use jQuery animations as a backup, and when possible use transforms, see http://css3.bradshawenterprises.com/legacy/ to find out how to use it.

You also need to download Modernizr, although you could write your own tests for conversions and convert yourself.

Answer 3

I see that you are using some custom easing features. These calculation values ​​at each stage of the nd animation can have a big impact on performance. Try removing the attenuation functions (or use the “swing” default value) and see if that improves performance.

I also see that you are using a packaged version of functions that facilitate js files - these days it is considered bad practice, because the browser has to unpack the file every time - even when loading from the cache - it also eats into the processor cycles - for more details see here John Resiga → http://ejohn.org/blog/library-loading-speed/ - It would be best to minimize javascript using, for example, the Google Closure compiler - I usually use the easing function that I require and put it in the main js file (permitting the license).

Although CSS3 transformations are good, they are not supported in all browsers, and unfortunately jQuery does not use them (for now).