анимация индикатора выполнения jQuery с помощью нажатий кнопок

0

Я пытаюсь настроить анимацию. Я бы хотел, чтобы он плавно переходил между начальным и целевым значениями, но начинался только нажатием кнопки продолжения.

Код, который я в настоящее время отлично работает, но при нажатии вперед или назад он приводит вас непосредственно к значениям:

//PROGRESS BAR
$( "#progress" ).progressbar(
{
    value: 0
})
.data("value","0");

//CONTINUE BUTTON
$("#cont").button();

//UPDATING PROGRESS BAR WHEN CONTINUE BUTTON CLICKED
$("#cont").click(function() 
{
    var currValue = $( "#progress" ).data("value");
    currValue = parseInt(currValue) ? parseInt(currValue) : 0;
    if(currValue <= 100) 
    {
        $( "#progress" ).progressbar({
          value: currValue+25
        }).data("value",currValue+25);
    }    
});

Я видел несколько примеров анимированных прогрессивных баров, но ни один из них не нажал и не остановился, когда было достигнуто определенное значение.

Мне хотелось бы что-то похожее на этот ужасный псевдокод. Lol

if(progress.value === 0 && continue button clicked)
{
    while(progress.value != 25)
    {
        progressbar.animate(progress.value + 1)
    }
}
else if(progress.value === 25 && continue button clicked)
{
    while(progress.value != 50)
    {
        progressbar.animate(progress.value + 1)
    }
}
etc. etc.

Кто-нибудь пробовал что-то подобное?

  • 1
    Я верю, что у меня есть . Удерживайте кнопку «Roll Dice», чтобы увидеть эффект. Отключите его на панели параметров. Дайте мне знать, если вы ищете что-то похожее.
  • 0
    Хотя это впечатляющая программа, это не совсем тот эффект, который я ищу. Как я уже сказал, я бы хотел, чтобы он начинался с 0, затем пользователь нажимает кнопку продолжения, и индикатор выполнения плавно перемещается до значения 25 и так далее. Думайте об этом больше как о 4 отдельных «слайдах», используя индикатор выполнения, чтобы визуализировать, на каком слайде или шаге вы находитесь в данный момент.
Показать ещё 4 комментария
Теги:
progress-bar
animation

1 ответ

0

Вот быстрый пример с использованием опции - jsfiddle Я обновил скрипт, чтобы управлять состоянием кнопок.

if ( target.is( "#next" ) ) {
    progressbar.progressbar( "option", {
      value: progressPercent+= 10
    });
  } else if ( target.is( "#previous" ) ) {
    progressbar.progressbar( "option", {
      value: progressPercent-= 10
    });
  }

Это не проверяет никаких ограничений, поэтому вы можете идти ниже нуля и выше 100 с переменной progressPercent. То, что любое легкое исправить ты.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню