which jquery effect does google search uses during pagination?

Question

I searched for a particular term it yielded 'n' number of results. When i do a paginate there was an effect occurring and the contents updated after that.. which jquery effect does google uses during search result pagination? Any suggestion...

Answer 1

It isn't one of the standard jQuery effects, when the AJAX call it sets the content opacity to 50% (or something like this) and when the next page is loaded it deletes the current contents, removes the opacity, applies the new data and fires the view port to the top of the screen.

Should be very simple to replicate.

EDIT

Okay so I slapped something together in jsFiddle, it's just a very quick and dirty attempt at replicating the Google page transition, remember that my jQuery code is for demonstration purposes, you'd want to use AJAX callbacks to change the state of the contents.

http://jsfiddle.net/puKBQ/

Answer 2

It's not jQuery that they use, but you can get the same effect in jQuery or vanilla JavaScript.

The simple method is to overlay the area with a <div> with a white background and 50% (adjust as needed) opacity. This is way cheaper on a processor than fading the content itself (especially in various versions of FireFox for some reason).

The common plugin for this is something like the block UI plugin, but if you don't need to display a message or prevent behavior you may be better off coding a more lightweight version yourself.