Custom Cycle transition doesn't work as expected
I'm trying to make a custom
Cycle transition. I want the slide to scroll left or right and simultaneously fade in or out to be revealed or disappear. To handle both directions in one transition I'm basing it on the built-in scrollHorz transition, which looks like this:
- $.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {
- $cont.css('overflow','hidden').width();
- opts.before.push(function(curr, next, opts, fwd) {
- $.fn.cycle.commonReset(curr,next,opts);
- opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
- opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
- });
- opts.cssFirst = { left: 0 };
- opts.cssBefore= { top: 0 };
- opts.animIn = { left: 0 };
- opts.animOut = { top: 0 };
- };
And this is what my changes look like:
- $.fn.cycle.transitions.scrollFade = function($cont, $slides, opts) {
- $cont.css('overflow','visible').width();
- opts.before.push(function(curr, next, opts, fwd) {
- $.fn.cycle.commonReset(curr,next,opts);
- opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
- opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
- });
- opts.cssFirst = { left: 0 };
- opts.cssBefore= { top: 0, opacity: 0, };
- opts.animIn = { left: 0, opacity: 1, };
- opts.animOut = { top: 0, opacity: 0, };
- };
This makes the slide that slides out fade as expected, but the slide that slides in doesn't fade. It is suddenly made visible before sliding in. So it ignores the opacity that I set on line 9. Why? Any help would be dearly appreciated!