jqueryui:animation获胜'；.progressbar（）完成后，两个都会消失

我正在尝试装配一个

.progressbar（）

和一个闪烁的

元素，这样当

.progressbar（）

完成加载时，这两个元素都会消失。相反，

元素不会停止闪烁，即使在它消失之后也是如此。它一直在继续。我尝试过使用一个布尔变量和一些if语句，但这不起作用

---

这里有一个到目前为止我得到的链接：

它的行为是这样的，因为您正在设置一个间隔，但您没有停止它

请尝试以下操作：

首先，将计时器放入变量中，例如：

// (simply put var timer = before your excisting interval)
// key-word "var" is not necessary
var timer = setInterval(function(){ (...) 

然后，评估每个间隔是否可以删除计时器。如果在间隔本身中计算值，这可能是最简单的。伪示例：

if(foo == 100) {
    clearInterval(timer);
}

---

这应该可以奏效。：）

它的行为是这样的，因为您正在设置一个间隔，但没有停止它

请尝试以下操作：

首先，将计时器放入变量中，例如：

// (simply put var timer = before your excisting interval)
// key-word "var" is not necessary
var timer = setInterval(function(){ (...) 

然后，评估每个间隔是否可以删除计时器。如果在间隔本身中计算值，这可能是最简单的。伪示例：

if(foo == 100) {
    clearInterval(timer);
}

---

这应该可以奏效。：）

我建议进行一些修改，如下所示：

$（文档）.ready（函数（）{
var begin=$（“#begin”）；
var intervalHook，timeoutHook，val=0；
begin.progressbar({
值：0，
最高：100
});
$（“#开始，#加载”）.fadeIn（4000）；
intervalHook=setInterval（函数（）{
$（“#加载”）.fadeIn（1000，函数（）{
美元。延迟（100）。淡出（1000）；
});
}, 2500);
功能进展（）{
val=begin.progressbar（“值”）|| 0；
begin.progressbar（“值”，val+1）；
如果（val<100）{
timeoutHook=setTimeout（进度，100）；
}
如果（val==100）{
clearTimeout（timeoutHook）；
clearInterval（intervalHook）；
美元（“#开始，#加载”）。淡出（4000）；
}
}
timeoutHook=setTimeout（进度，3000）；
});

利用

clearInterval

和

clearTimeout

。您可以分别传递从

setInterval

和

setTimeout

返回的值，以在

.progressbar（）

达到其最大值时停止触发这些值

将

fadeIn

/

fadeOut

功能与

progress

功能分开。这样，您的

fadeIn

/

fadeOut

逻辑不会在每次调用

progress（）

时受到影响

确保在

setInterval

调用中指定的间隔允许动画完成。最初，为动画操作指定了1000毫秒的间隔，完成动画操作需要4100毫秒

---

我建议进行一些修改，如下所示：

$（文档）.ready（函数（）{
var begin=$（“#begin”）；
var intervalHook，timeoutHook，val=0；
begin.progressbar({
值：0，
最高：100
});
$（“#开始，#加载”）.fadeIn（4000）；
intervalHook=setInterval（函数（）{
$（“#加载”）.fadeIn（1000，函数（）{
美元。延迟（100）。淡出（1000）；
});
}, 2500);
功能进展（）{
val=begin.progressbar（“值”）|| 0；
begin.progressbar（“值”，val+1）；
如果（val<100）{
timeoutHook=setTimeout（进度，100）；
}
如果（val==100）{
clearTimeout（timeoutHook）；
clearInterval（intervalHook）；
美元（“#开始，#加载”）。淡出（4000）；
}
}
timeoutHook=setTimeout（进度，3000）；
});

利用

clearInterval

和

clearTimeout

。您可以分别传递从

setInterval

和

setTimeout

返回的值，以在

.progressbar（）

达到其最大值时停止触发这些值

将

fadeIn

/

fadeOut

功能与

progress

功能分开。这样，您的

fadeIn

/

fadeOut

逻辑不会在每次调用

progress（）

时受到影响

确保在

setInterval

调用中指定的间隔允许动画完成。最初，为动画操作指定了1000毫秒的间隔，完成动画操作需要4100毫秒

• 您还可以使用progressbar函数的选项“complete”。 它使您的代码更干净，因为您不需要任何计数器，也不需要 语句来检查“if loading==true”或其他内容
• 我还将设置两个间隔变量，因为进度条和blicking效应 ar未同步：

  $(document).ready(function(){
      var begin = $("#begin").fadeIn(4000);
      var loading = $("#loading").fadeIn(4000);
      begin.progressbar({
          value: 0,
          max: 100,
          complete: function(event, ui){
              begin.fadeOut(4000);
              loading.fadeOut(4000);
              clearInterval(barinterval);
              clearInterval(blinkinterval);
          }
      });
  
      var barinterval = setInterval(function(){
              begin.progressbar("value", begin.progressbar("value") + 1);
              },100);
  
      var blinkinterval = setInterval(function(){
          loading.fadeIn(500, function(){
              $(this).delay(100).fadeOut(500);
              });
          },1500);
  });
  

• 您还可以使用progressbar函数的选项“complete”。 它使您的代码更干净，因为您不需要任何计数器，也不需要 语句来检查“if loading==true”或其他内容
• 我还将设置两个间隔变量，因为进度条和blicking效应 ar未同步：

  $(document).ready(function(){
      var begin = $("#begin").fadeIn(4000);
      var loading = $("#loading").fadeIn(4000);
      begin.progressbar({
          value: 0,
          max: 100,
          complete: function(event, ui){
              begin.fadeOut(4000);
              loading.fadeOut(4000);
              clearInterval(barinterval);
              clearInterval(blinkinterval);
          }
      });
  
      var barinterval = setInterval(function(){
              begin.progressbar("value", begin.progressbar("value") + 1);
              },100);
  
      var blinkinterval = setInterval(function(){
          loading.fadeIn(500, function(){
              $(this).delay(100).fadeOut(500);
              });
          },1500);
  });
  

---

谢谢你，卢卡斯。这确实有帮助。：）谢谢你，卢卡斯。这确实有帮助。：）