Лента за напредък с цветен преход jquery?

Здравейте, опитвам се да създам лента за напредъка, в която при кликване намалява процентно (с малка анимация) и променя цвета си от зелен на червен. Така че първият цвят е 100% зелен. Ако натисна веднъж, ширината трябва да е 99%, а цветът малко повече към червено. Това трябва да продължи, докато ширината на вътрешната лента за напредък стане 1% и цветът стане 100% червен.

Това възможно ли е? Или трябва да задам някакви ограничения, при които цветът се променя с друг? Ще използвам само jquery и jquery mobile. (БЕЗ jquery-ui)

Имам това досега:

css:
#battery{
    height: 100%;
    margin-left: 2%;
    margin-top: 1%;
    border-color: black;
    border-style: solid;
}

#battery-inner{
    background:green;
    height: 100%;
    float: right;
    width: 100%;
}

js (който е включен в желаната функция onclick():

$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');

Искам цветовете да са като в този пример (червена страна, жълта среда, зелена друга страна)

http://www.cssflow.com/snippets/animated-progress-bar/demo

Засега работи, но няма никаква анимация, нито промяна на цвета...


cordova javascript jquery css jquery-mobile
person Alex Stanese    schedule 25.02.2014    source източник
comment
Имам известен проблем да визуализирам какво точно трябва да прави това.. мислите ли, че можете да го поставите в jsfiddle?   -  person user3334690    schedule 25.02.2014
comment
@user3334690 Опитвам се да създам лента като тази: cssflow.com/snippets /animated-progress-bar/demo, но трябва да намалява само с 1%, когато щракна върху един бутон (това е извън него), а НЕ да показва тези проценти отгоре (както в примера). Не работи с кода ми на fiddle, защото кодът, който написах, е само половината от това, което трябва да бъде и няма да разберете всичко + искам да го използвам в приложение за phonegap.   -  person Alex Stanese    schedule 25.02.2014

Отговори (1)


arrow_upward
2
arrow_downward

FIDDLE

Това използва малък плъгин за плъзгач, който написах в jQuery, но трябва да ви даде добра представа как това може да се осъществи.

Номерът е просто да изчислите % стойността на лентата за напредък, след което да я приложите към RGB цвят, обратно за ЧЕРВЕНИЯ компонент, прогресивно за ЗЕЛЕНИЯ.

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);
}

jQuery

$('#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);
});
person SW4    schedule 25.02.2014
comment
Благодаря ти. Но може ли трети основен цвят да има в ръкавицата (жълтия цвят)? Както в този пример: cssflow.com/snippets/animated-progress-bar/demo И може ли да се намали чрез o щракване на бутон с малка анимация? Това е точно когато търся! - person Alex Stanese; 25.02.2014
comment
jsfiddle.net/gm4tG/3 - за промяна на цвета чрез жълто и настройка на бутона. Не съм добавил анимация и т.н., може да искате да си поиграете - person SW4; 25.02.2014
comment
Много благодаря!!! Но може ли бутонът действително да намалява лентата всеки път с 10% с кратка анимация? Аз съм много нов в jquerry и ми е трудно да го правя.. - person Alex Stanese; 25.02.2014
comment
Tahnx! jquerry не поддържа ли анимация в слайдера? - person Alex Stanese; 25.02.2014
comment
или не сте запознати с jquery анимации? - person Alex Stanese; 25.02.2014