CODEWITHSUNDEEP
jqueryhtml
Jannis M
Jannis M

Reputation: 745

How can this jQuery animation be optimized/smooth

Currently I am working on this site. On the page 'photographers' I am running a filter functionality which hides/shows the images corresponding to the photographers on the left site.

At this time there are 60 thumbnails to display and animation is not smooth. Later on there will be around 150 pictures.

How can I optimize this animation? Any suggestions are appreciated!

Upvotes: 0

Views: 170

Answers (1)

Justice Erolin
Justice Erolin

Reputation: 2879

  1. Preload the images so that it doesn't flicker while it waits to download the new image (colored image should be preloaded)
  2. Position the colored image absolutely over the original position, and then animate the opacity.
  3. Use CSS3 transitions first, then JS/jQuery animations as a backup.

Upvotes: 1

Related Questions