/* drucafe */

Thursday, February 27, 2014

Jquery Roundabout problem after Jquery Update

The jQuery version included in a standard Drupal 7 distribution is 1.4. This version is quite old. There is a module jQuery Update which allows to use newer versions of  jQuery.


On my Drupal site, I had a jQuery Roundabout plugin which was running fine with jQuery 1.4. However, I needed to upgrade to jQuery 1.8 to be able to use some other modern plugins.

After installing the jQuery Update module and upgrading to 1.8, the Roundabout was broken. More precisely, the animation was incomplete and the first image was showing on top in every frame for a moment.

Here is the animation before upgrade:


And here is after upgrade:



After some debugging, I found out why it happens. The Roundabout script calls a jQuery easing function:

newBearing = $.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing - passedData.start, passedData.totalTime);

Here is how the jquery.min.js code looks like for this function:

In jQuery 1.4:


And in jQuery 1.8:


It's quite different and gives different result. In the context of Roundabout, the result in 1.8 is incorrect.

The solution is to additionally load the jquery.easing plugin. This plugin is mentioned on the Roundabout site as a plugin which defines custom easing styles. But it looks like for jQuery 1.8 it is needed even for the basic "swing" style.









No comments:

Post a Comment