What does JpegMini use to animate the image comparison on the homepage?

Hopefully the title is clear. I'm talking about the large image comparison slider on the homepage of JpegMini.

I've managed to identify it as needing three core files (writ开发者_运维百科ten as they are named on the site):

• jquery.min.js
• jquery-ui-1.8.14.min.js
• scripts-0135.min.js

It's this last one I'm unable to find any information about so it may hold the secrets but I don't know.

Anyone got any ideas?

The .imagePairs elements have a mousemove event bound:

$('.imagePairs').data('events').mousemove[0].handler

is a function.

The code is apparent inside scripts-0135.min.js, but it is minified.

What you can do is parsing it through jsbeautifier and see if you can make something out of it. It will still have variable names which make no sense, so it will not be easy.

Looking at the code, it seems like they initialize it with $('.imagePairs').myBeforeAfter, which is most probably the function that handles the effect.

I never was able to determine the script used, in the end I searched the web and found a suitable alternative which came with good documentation. http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/