Posted By

JoshChris on 07/06/12


Tagged

scroll jquery scrollbar vertical cycle malsup


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

BrockSamsom
rygiel


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


 / Published in: jQuery
 

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.

  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  

You need to login to post a comment.