Slider with buttons. How to improve?

Question

I need to make a slider.

I have content (which should shift horizontally), and the two buttons are "right" and "left."

If you press and hold the button, the contents will begin to move (in the corresponding direction). If you do not hold the button, the movement stops. This behavior copies the behavior of a regular window scrollbar.

I wrote the code:

var animateTime = 1, offsetStep = 5; //event handling for buttons "left", "right" $('.bttR, .bttL') .mousedown(function() { scrollContent.data('loop', true).loopingAnimation($(this)); }) .bind("mouseup mouseout", function(){ scrollContent.data('loop', false); }); $.fn.loopingAnimation = function(el){ if(this.data('loop') == true){ var leftOffsetStr; leftOffsetInt = parseInt(this.css('marginLeft').slice(0, -2)); if(el.attr('class') == 'bttR') leftOffsetStr = (leftOffsetInt - offsetStep).toString() + 'px'; else if(el.attr('class') == 'bttL') leftOffsetStr = (leftOffsetInt + offsetStep).toString() + 'px'; this.animate({marginLeft: leftOffsetStr}, animateTime, function(){ $(this).loopingAnimation(el); }) } return this; } 

But I have a few things that I don't like:

• It always calls the animation function ( loopingAnimation ) - I think this is an extra load (not good).
• When moving content, it “twitches and trembles” - (this is not very).

How can I solve this problem more elegantly and without the flaws of my code?

Answer 1

I don’t think you can go around the loop through a function or twitch and tremble if you animate more than one pixel at a time.

But I tried a little to clear my code, because you can use +=1px or -=1px with the animation function: ( Refresh ): removed animations, but you can use +=1px or -=1px for future reference)

 $(document).ready(function(){ var animateTime = 1, offsetStep = 5, scrollWrapper = $('#wrap'); //event handling for buttons "left", "right" $('.bttR, .bttL') .mousedown(function() { scrollWrapper.data('loop', true); loopingAnimation($(this), $(this).is('.bttR') ); }) .bind("mouseup mouseout", function(){ scrollWrapper.data('loop', false).stop(); $(this).data('scrollLeft', this.scrollLeft); }); loopingAnimation = function(el, dir){ if(scrollWrapper.data('loop')){ var sign = (dir) ? offsetStep : -offsetStep; scrollWrapper[0].scrollLeft += sign; setTimeout( function(){ loopingAnimation(el,dir) }, animateTime ); } return false; }; }) 

Since I have OCD and don’t like slow scrollers, I made a demo with mouse functionality and drag and drop. Here is the additional code:

Update . In fact, I think if you do not use the jQuery animation function, you will get a smoother scroll. I updated the code above and the demo .

 $('#wrap') // wrap around content .mousedown(function(event) { $(this) .data('down', true) .data('x', event.clientX) .data('scrollLeft', this.scrollLeft); return false; }) .mouseup(function (event) { $(this).data('down', false); }) .mousemove(function (event) { if ($(this).data('down') == true) { this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX; } }) .mousewheel(function (event, delta) { this.scrollLeft -= (delta * 30); }) .css({ 'overflow' : 'hidden', 'cursor' : '-moz-grab' });