javascript - 可能的 : Animate Jquery slider?

Question

是否可以通过 jQuery 为 slider 设置动画？这样一来，如果我按下按钮， slider 的内部应该移动得更慢(例如 300 毫秒)，并且不会对鼠标点击和滑动使用react？

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