Возможно: Анимировать слайдер Jquery?

Question

Возможно: Анимировать слайдер Jquery?

0

Можно ли анимировать слайдер из 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);
});

Спасибо Большое!

Alex Stanese 25 фев. 2014, в 18:21

Источник

0

что вы подразумеваете под "а не реагировать на щелчок мышью и скольжение"
Irvin Zhan 25 фев. 2014, в 16:55
0

@IrvinZhan IrvinZhan это не должно быть затронуто перетаскиванием мышью или щелчком .. (таким образом, фактическая способность ползунка должна быть отключена) .. это должна быть просто панель без возможности нажатия, которая уменьшается при нажатии кнопки
Alex Stanese 25 фев. 2014, в 17:01

Теги:

javascript

jquery

css

cordova

jquery-mobile

1 ответ

Ещё вопросы

что вы подразумеваете под "а не реагировать на щелчок мышью и скольжение"
@IrvinZhan IrvinZhan это не должно быть затронуто перетаскиванием мышью или щелчком .. (таким образом, фактическая способность ползунка должна быть отключена) .. это должна быть просто панель без возможности нажатия, которая уменьшается при нажатии кнопки

André Figueiredo · Accepted Answer · 2014-02-25T13-56-00.000Z

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

Это свойство поддерживается в Chrome, Firefox, Internet Explorer 10, Opera и Safari.

Пересмотренный JSFiddle Here

можно ли отключить взаимодействие с мышью .. (поэтому должна быть отключена действительная способность ползунка) .. .. это должна быть просто панель без возможности нажатия, которая уменьшается при нажатии кнопки, на нее не должны влиять перетаскивание или щелчок мыши ... (поэтому фактическая способность слайдера должна быть отключена) ..