Question

I’m using jQuery Tools scrollable to create picture slides. Is there a way to customize the animation so instead of easing it fades-out/fades-in?

Before I try a new plugin, I want to make sure there isn’t an easy way to change the transition. I have integrated the plugin in several sections and prefer to extend it instead of using a new plugin.

The authors provide a custom easing function, but I have no idea how to make it fade:

// custom easing called "custom"
$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
// use the custom easing
$("div.scrollable").scrollable({easing: 'custom', speed: 700, circular: true});

Answer 1

The easing function just defines a shape at which a value goes from A to B, it can’t explicitly fade in or out. With this library there are events you can listen to – you could try fading out on the onBeforeSeek and then fading back in on the onSeek events described here.

If your container for the items has id = ‘items’:

$(".scrollable").scrollable({
   onBeforeSeek: function (e,i) {
      $("#items").fadeOut();
   },
   onSeek: function (e,i) {
      $("#items").fadeIn();
   }
});