jquery ui slider animation on dragging the handle

问题

I have a question about the jquery ui slider, have been searching for a while now but can not find a working anwser.

For a project I am using the http://jqueryui.com/demos/slider/#steps jQuery ui Slider. It works well and gets most of the stuff done.

I use steps of 250 and when a user clicks on e.g 250 or 500 the slider handle animates/slides to the value.

But when a user is holding(dragging) the handle and drags it manually it does not animate/slide the steps but just goes to the next value very ugly.

Does anyone know how to make the handle animated/sliding when a user is holding it manually instead of clicking on some predefined values?

Thanks!

回答1:

The jQuery UI Slider(version 1.9.2) doesn’t support dragging animation. You have to change the library code I think.

Here is the patch javascript code

    (function( $, undefined ) {

        $.extend($.ui.slider.prototype.options, {
            dragAnimate: true
        });

        var _mouseCapture = $.ui.slider.prototype._mouseCapture;
        $.widget("ui.slider", $.extend({}, $.ui.slider.prototype, {
            _mouseCapture: function(event) {
                _mouseCapture.apply(this, arguments);
                this.options.dragAnimate ? this._animateOff = false : this._animateOff = true;
                return true;
            }
        }));

    }(jQuery));

Here is the detail information. http://www.markliublog.com/jquery-ui-slider-dragging-animate.html

来源：https://stackoverflow.com/questions/11415889/jquery-ui-slider-animation-on-dragging-the-handle