jquery滑塊不立即停止與mousedown和mouseup

Question

下面的鏈接是用於jQuery滑塊的副本，我想使滑動平滑，但是當我減少setinterval（說200）的時間滑塊不響應mouseup事件瞬間，滑鼠在鼠標觸發後的一兩秒鐘後停止。 我也試過在jquery動畫上使用stop，但這沒有幫助。 這是鏈接。 http://jsfiddle.net/WwT54/ 現在，在每半秒鐘後，幻燈片移動10px，我想讓它看起來平滑。

$("#popUpInnerArrowLeft").mousedown(function (event) { 

    movetoleft(); 
}); 

var into, into2; 

function movetoleft() { 
    function moveit() { 
     $(".thumbsInnerContainer").animate({ 
      left: '-=10px' 
     }); 
    } 

    into = setInterval(function() { 
     moveit(); 
    }, 500); 

} 

$(document).mouseup(function (event) { 
    clearInterval(into); 

}); 



//for the right arrow 

$("#popUpInnerArrowRight").mousedown(function (event) { 
    movetoright(); 
}); 

function movetoright() { 

    function moveit2() { 
     $(".thumbsInnerContainer").animate({ 
      left: '+=10px' 
     }); 
    } 

    into2 = setInterval(function() { 
     moveit2(); 
    }, 500); 

} 

$(document).mouseup(function (event) { 
    clearInterval(into2); 
}); 

Answer 1

檢查這個（是你想要的）：

var into, into2, unit = ''; 

$("#popUpInnerArrowLeft").click(function (e) { 
    e.preventDefault(); 
    unit = false; 
    movetoleft(); 
}); 

//for the right arrow 
$("#popUpInnerArrowRight").click(function (e) { 
    e.preventDefault(); 
    unit = true; 
    movetoright(); 
}); 

function moveit() {  

    $(".thumbsInnerContainer").stop(true,true).animate({ 
     left: ((unit == true)? '+=':'-=') + '10px' 
    },{easing:'linear'}); 
} 

function movetoright() {   
    into = setInterval(function() { 
     moveit(); 
    }, 300); 
} 

function movetoleft() {  
    into = setInterval(function() { 
     moveit(); 
    }, 300); 
} 

$(document).mouseup(function (event) { 
    clearInterval(into);  
}); 

工作小提琴這裏：http://jsfiddle.net/WwT54/2/