用按钮点击动画 jQuery 进度条答案

【问题标题】：animating a jQuery progress bar with button clicks用按钮点击动画 jQuery 进度条
【发布时间】：2014-05-07 21:14:05
【问题描述】：

我正在尝试让我的进度条动画化。我希望它在起始值和目标值之间平稳过渡，但只能通过单击继续按钮来启动。

我目前的代码效果很好，但是当向前或向后单击时，它会直接将您带到值：

//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.

有人试过类似的吗？

【问题讨论】：

我相信I have。按住“掷骰子”按钮查看效果。在选项面板上禁用它。如果您正在寻找类似的东西，请告诉我。
虽然这是一个令人印象深刻的程序，但它并不是我想要的效果。正如我所说，我希望它从 0 开始，然后用户单击继续按钮，进度条平滑地滑到 25 的值，依此类推。把它想象成 4 个单独的“幻灯片”，使用进度条来可视化您当前所在的幻灯片或步骤。
“类似的东西”是指启动/停止、启用/禁用和 fx 功能背后的想法，这是简单的数学运算，都在一个 progressbar 对象中。
类似http://jsfiddle.net/8u76B/？它只有一个继续按钮 (+25)
其实我还是有一些问题。该代码在 JQ 1.9.1 上的 JSfiddle 中运行良好，但我在本地运行 jQuery 1.10.4，当我将代码复制到它上面时，它不再有效。我认为这将是因为 2 个版本之间的某些内容已被弃用。有人知道这是什么吗？ @AbrahamUribe

标签： javascript jquery jquery-ui animation progress-bar

【解决方案1】：

这是一个使用选项的简单示例 - jsfiddle 我也更新了小提琴来管理按钮的状态。

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

这不会检查任何限制，因此您可以使用 progressPercent 变量低于零和高于 100。不过，这很容易解决。

【讨论】：