On Jan 6, 9:15 pm, Acaz Souza <acazso...@gmail.com> wrote: > Is just for learning this interesting point. > > What the matematics logic of both in animation framework. > > They use the same logic?
This is the original question: | MooTools:http://www.jsfiddle.net/4vnya/ | jQuery:http://www.jsfiddle.net/eFbwJ/36/ | (Compare the code, the effects. You decide.) First of all, the two links are reversed: MooTools: http://www.jsfiddle.net/eFbwJ/36/ jQuery: http://www.jsfiddle.net/4vnya/ That simply obfuscates any issues that exist. Second, the visual effect generated is different. Note that in the jQuery one, the image receiving the click ends up on the top of the stack. In the Mootools one, they are stacked in source code order. Third, running in FF (the only place I've tested so far), the jQuery is doing extra work in rotating the images, which doesn't happen in the MooTools version. (MooTools has '-webkit-transform': 'rotate(' + RandRange(-30,30) + 'deg)', whereas jQuery has both '-webkit-transform': 'rotate(' + RandRange(-30,30) + 'deg)', and '-moz-transform': 'rotate(' + RandRange(-30,30) + 'deg)' .) Fourth, the different background images will certainly have some noticeable impact on how animations appear. Fifth, the MooTools code has what looks like an easing algorithm applied: images.each(function(img){ img.set('morph', { transition: 'back:out' }); } but no jQuery equivalent is used. Sixth (and this might be the cause of the second one) the MooTools effect is staggered across the images, while the jQuery ones run simultaneously. This uses the 40ms increments with this code structure: images.each(function(img, i){ (function(){ // animation code here. }).delay(40 * i, img); }); Finally, although these two animations both move the images approximately the same amount, the transformations they apply are very different. When the MooTools example collapses the images, they move to locations within +- 20 pixels from the location of the clicked image, and are not rotated. When the jQuery example collapses the images, they move to the same location as the clicked image, and are rotated to between -20 and 20 degrees. In other words, these two animations are far too different to use for comparing the libraries. -- Scott
