Question

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

我目前使用的代码效果很好，但是当向前或向后点击时，它会直接显示值：

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

有人试过类似的东西吗？

Answer 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。这是任何容易解决的问题。

使用按钮点击动画jQuery进度条

1 个答案: