Advanced Search

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

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $.fn.cycle.transitions.scrollUpOrDown = function ($cont, $slides, opts) {
  2. 	$cont.css('overflow', 'hidden');
  3. 	opts.before.push($.fn.cycle.commonReset);
  4. 	// custom transition fn (down for next, up for prev)
  5. 	opts.fxFn = function (curr, next, opts, cb, fwd) {
  6. 		var h = $cont.height();
  7. 		opts.cssFirst = {top: 0};
  8. 		opts.animIn = {	top: 0};
  9. 		opts.cssBefore = {top: ( fwd ) ? h : 0-h };
  10. 		opts.animOut = {top:( fwd ) ? 0 - h : 0+h};
  11. 		var $l = $(curr),$n = $(next);
  12. 		$n.css(opts.cssBefore);
  13. 		var fn = function () {
  14. 			$n.show();
  15. 			$n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb);
  16. 		};
  17. 		$l.animate(opts.animOut, opts.speedOut, opts.easeOut, function () {
  18. 			if (opts.cssAfter) $l.css(opts.cssAfter);
  19. 			if (!opts.sync) fn();
  20. 		});
  21. 		if (opts.sync) fn();
  22. 	};
  23. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.