Apr
16th
Thu
16th
jQuery Cycle Different Effects for Previous and Next
jQuery Cycle plugin is fantastic. However, there is a little bit of inconsistantcy when using it as a left/right slideshow. You click the next arrow, it goes right. You click the previous arrow, it goes left right. The following code allows you to have different effects based on previous/ next button clicks.
jQuery(document).ready(function(){
$('#blink_headlines').cycle({
fx: 'scrollBothWays',
next: '#cycle_next_blue',
prev: '#cycle_prev_blue',
speed: 1000,
timeout: 0,
pause: 1,
easeIn: 'easeOutBack',
easeOut: 'easeOutBack'
});
});
$.fn.cycle.transitions.scrollBothWays = function($cont, $slides, opts) {
$cont.css('overflow','hidden');
opts.before.push($.fn.cycle.commonReset);
// custom transition fn (trying to get it to scroll forward and backward)
opts.fxFn = function(curr, next, opts, cb, fwd) {
var w = $cont.width();
opts.cssFirst = { left: 0 };
opts.animIn = { left: 0 };
if(fwd){
opts.cssBefore= { left: w, top: 0 };
opts.animOut = { left: 0-w };
}else{
opts.cssBefore= { left: -w, top: 0 };
opts.animOut = { left: w };
};
var $l = $(curr), $n = $(next);
var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut, animOut = opts.animOut, animIn = opts.animIn;
$n.css(opts.cssBefore);
var fn = function() {$n.show();$n.animate(animIn, speedIn, easeIn, cb);};
$l.animate(animOut, speedOut, easeOut, function() {
if (opts.cssAfter) $l.css(opts.cssAfter);
if (!opts.sync) fn();
});
if (opts.sync) fn();
};
};
