Return to Snippet

Revision: 58293
at July 6, 2012 09:08 by JoshChris


Initial Code
$.fn.cycle.transitions.scrollUpOrDown = function ($cont, $slides, opts) {
	$cont.css('overflow', 'hidden');
	opts.before.push($.fn.cycle.commonReset);
	// custom transition fn (down for next, up for prev)
	opts.fxFn = function (curr, next, opts, cb, fwd) {
		var h = $cont.height();
		opts.cssFirst = {top: 0};
		opts.animIn = {	top: 0};
		opts.cssBefore = {top: ( fwd ) ? h : 0-h };
		opts.animOut = {top:( fwd ) ? 0 - h : 0+h};
		var $l = $(curr),$n = $(next);
		$n.css(opts.cssBefore);
		var fn = function () {
			$n.show();
			$n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb);
		};
		$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function () {
			if (opts.cssAfter) $l.css(opts.cssAfter);
			if (!opts.sync) fn();
		});
		if (opts.sync) fn();
	};
};

Initial URL


Initial Description
This is some code that creates an effect for jQuery Cycle to scroll up when you click the down button and down when you click the up button - like a scrollbar.

Initial Title
jQuery Cycle code to scroll up and down like a scroll bar

Initial Tags
jquery

Initial Language
jQuery