Question

I need to make a slider.

I have content (which should shift horizontally) and two buttons – “right” and “left”.

If you press the button and hold it, the content starts to move (in the appropriate direction). If you not hold the button, then the movement stops. This behavior copies the behavior of a usual window scrollbar.

I wrote some 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 it does have a few things that I do not like:

1. It always calls the function animation (loopingAnimation) – I think that this is an extra load (not good).
2. When moving content he “twitches and trembling” – (it’s not pretty).

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

Answer 1

I don’t think you can get around looping through the function or the twitching and trembling if you animate more than one pixel at a time.

But I did try to clean up your code a bit,because you can use +=1px or -=1px with the animation function: (Update: removed the animation function, 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;
    };

})

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

Update: Actually, I think if you don’t use the jQuery animate function you get a smoother scroll. I have 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'
    });