带按钮的滑块。如何提高？

Question

我需要制作一个滑块。

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

如果按住按钮，内容开始移动（以适当的方向）。如果你没有按住按钮，那么运动停止。此行为复制了通常的窗口滚动条的行为。

我写了一些代码：

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

但它确实有一个我不喜欢的几件事情：

1. 它总是调用函数动画（loopingAnimation） - 我认为这是额外的负载（不好）。
2. 移动内容时，他会“抽搐颤抖” - （这不太好）。

我该如何解决这个问题优雅没有我的代码的缺点？

Answer 1

我不认为如果您一次为多个像素设置动画效果，您可以绕过功能循环或抽动颤抖。

但我没有尝试清理你的代码位，因为你可以使用+=1px或-=1px与动画功能：（更新：删除动画功能，但你可以使用+=1px或-=1px以供将来参考）

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

}) 

因为我有强迫症，不喜欢缓慢的滚动条，我made a demo使用鼠标滚轮功能和鼠标拖放功能。这里是额外的代码：

更新：其实，我认为如果你不使用jQuery的动画功能，你会得到一个更平滑的滚动。我已经更新了上面的代码，并且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' 
    });