可能的：動畫JQuery滑塊？

Question

是否有可能從jQuery動畫滑塊？所以如果我按下按鈕，滑塊的內部應該移動得更慢（例如300毫秒），也不會對鼠標點擊和滑動產生反應？

這是代碼： http://jsfiddle.net/gm4tG/5/

HTML：

<div id='slider' class='sliderBar'></div> 
<button>Remove 10%</button> 

CSS：

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#slider { 
    height:20px; 
    max-height:20px; 
} 
.sliderBar-progress { 
    background:rgb(0, 255, 0); 

} 

JS：

$('#slider').sliderBar({ 
    start: 100, 
    onChange: function (val) { 
     var red = 0, 
      green = 0; 
     if (val >= 50) { 
      red = 255 - Math.round(((val - 50)/50) * 255); 
      green = 255; 
     } else { 
      red = 255; 
      green = Math.round(((val)/50) * 255); 

     } 
     $('.sliderBar-progress').css({ 
      background: "rgb(" + red + "," + green + ",0)" 
     }); 
    } 
}); 

$('button').on('click', function() { 
$('#slider').setsliderBar($('#slider').getsliderBar()-10, true); 
}); 

非常感謝你！

Answer 1

.sliderBar-progress { 
    background:rgb(0, 255, 0); 
    transition-duration: 5s; 
    -webkit-transition-duration: 5s; /* for Safari */ 
} 

此屬性在Chrome，Firefox，Internet Explorer 10，Opera和Safari中受支持。

Revised JSFiddle Here