jQuery用户界面：动画不会停止后.progressbar（）完成，并都消逝

我试图钻机一.progressbar()和闪烁<span>元素，这样，当.progressbar()完成加载，无论消失。相反，<span>元素即使在消失后也不会停止闪烁。它只是继续前进。我试过使用一个布尔变量和一些if语句，但这不起作用。jQuery用户界面：动画不会停止后.progressbar（）完成，并都消逝

下面是我到目前为止已经有一个链接：http://jsfiddle.net/mnbishop017/XqH6B/

来源

2014-06-18 017Bluefield

为显示在下面的小提琴，我建议一些改动：http://jsfiddle.net/Ws4Lz/

$(document).ready(function() { 
    var begin = $("#begin"); 
    var intervalHook, timeoutHook, val = 0; 

    begin.progressbar({ 
     value: 0, 
     max: 100 
    }); 

    $("#begin,#loading").fadeIn(4000); 

    intervalHook = setInterval(function() { 
     $("#loading").fadeIn(1000, function() { 
      $(this).delay(100).fadeOut(1000); 
     }); 
    }, 2500); 

    function progress() { 
     val = begin.progressbar("value") || 0; 
     begin.progressbar("value", val + 1); 
     if (val < 100) { 
      timeoutHook = setTimeout(progress, 100); 
     } 
     if (val == 100) { 
      clearTimeout(timeoutHook); 
      clearInterval(intervalHook); 
      $("#begin,#loading").fadeOut(4000); 
     } 
    } 

    timeoutHook = setTimeout(progress, 3000); 
});

化妆用的clearInterval和clearTimeout。您可以分别传递从setInterval和setTimeout返回的值，以在您的.progressbar()达到其最大值后停止触发这些值。
从progress函数中分离fadeIn/fadeOut功能。这样，每调用progress()时，您的fadeIn/fadeOut逻辑都不会受到影响。
确保您在setInterval调用中指定的间隔允许完成动画。最初，您为动画操作指定的间隔时间为1000毫秒，需要4100毫秒才能完成。

来源

2014-06-18 21:30:35 lucasjackson

感谢此，卢卡斯。这确实有帮助。 :) – 017Bluefield

它的行为，那是因为你设置的时间间隔，但你不能阻止它。

尝试以下操作：

首先，把你的计时器在一个变量，例如：

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

然后，评估每个间隔计时器是否可能被删除。如果您评估间隔本身的值，这可能是最容易的。伪示例：

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

这应该有所斩断。 :)

来源

2014-06-18 21:29:30 Zomry

您也可以使用该选项的进度功能的“完整”。它使你的代码更清洁，因为你不需要任何计数器，也不会用语句来检查“if loading == true”或其他什么。

我也要设置2个区间变量由于进度条和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); 
});

http://jsfiddle.net/XqH6B/20/

来源

2014-06-18 22:48:41 nomayann

jQuery用户界面：动画不会停止后.progressbar（）完成，并都消逝

回答

相关问题