可能：Animate Jquery滑块？

Question

是否可以从jQuery动画滑块？因此，如果按下按钮，滑块内部应移动得更慢（例如300ms），也不会对鼠标点击和滑动做出反应？

这是代码： 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