Jquery 带按钮的滑块。如何改进？

我需要做一个滑块

我有内容（应该水平移动）和两个按钮——“右”和“左”

如果按住按钮，内容将开始移动（在适当的方向）。如果不按住按钮，则移动停止。此行为复制了常用窗口滚动条的行为

我写了一些代码：

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;
}

但它确实有一些我不喜欢的东西：

它总是调用函数animation（

loopingAnimation

）-我认为这是一个额外的负载（不好）

当移动内容时，他会“抽搐和颤抖”（这并不漂亮）

---

如何才能更优雅地解决这个问题，而不存在代码的缺陷？

如果一次设置多个像素的动画，我认为你无法绕过函数循环或抖动

但我确实尝试过清理一下你的代码，因为你可以使用

+=1px

或

-=1px

的动画功能：（更新：删除了动画功能，但你可以使用

+=1px

或

-=1px

作为将来的参考）

因为我有强迫症，不喜欢慢滚动，我喜欢鼠标滚轮功能和鼠标拖放功能。以下是额外代码：

更新：事实上，我认为如果不使用jQuery动画功能，滚动会更平滑。我已经更新了上面的代码，并且

---

这太棒了！谢谢你，帮了我很多忙！（修复鼠标滚轮插件的断开链接）。

$(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;
    };

})

$('#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'
    });