CODEWITHSUNDEEP
jqueryjquery-tools
Mohamad
Mohamad

Reputation: 35349

How to change easing into fading in jQuery

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});

Upvotes: 1

Views: 6198

Answers (2)

camslice
camslice

Reputation: 635

Firstly you should set the speed: 0 so that it's not animating the movement in any way.

Then I would cache the .items wrapper so that the function isn't searching the DOM every time.

I would also use .fadeTo() instead of 'fadeIn/Out because all you really want to do is change the opacity, not the display:property. See jQuery docs: .fadeTo()

You don't need to pass the event e and index i arguments either:

var $items = $('.scrollable .items');

$(".scrollable").scrollable({
    speed: 0,            
    onBeforeSeek: function() {
        $items.fadeTo(0,0);
    },
    onSeek: function() {
        $items.fadeTo('fast',1);
    }
)};

Upvotes: 2

Steve Lewis
Steve Lewis

Reputation: 1302

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();
   }
});

Upvotes: 5

Related Questions