Question

我正在尝试装备.progressbar()和闪烁的 <span>元素，这样，当.progressbar()完成加载时，两者都会消失。相反，<span>元素即使在消失之后也不会停止闪烁。它只是继续前进。我尝试过使用布尔变量和一些if语句，但这不起作用。

这是我到目前为止的链接：http://jsfiddle.net/mnbishop017/XqH6B/

Answer 1

我建议进行一些更改，如下面的小提琴所示：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()达到最大值后停止这些值。
将fadeIn / fadeOut功能与progress功能分开。这样，每次调用fadeIn时，您的fadeOut / progress()逻辑都不会受到影响。
确保您在setInterval调用中指定的时间间隔允许您的动画完成。最初，您为动画操作指定了1000毫秒的间隔，需要4100毫秒才能完成。

Answer 2

它的行为方式是因为您设置了一个间隔，但是您没有停止它。

尝试以下方法：

首先，将您的计时器放在一个变量中，例如：

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

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

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

这应该可以解决问题。：）

Answer 3

你也可以使用选项＆＃34;完成＆＃34;进度条功能。它使您的代码更清晰，因为您不需要任何计数器，也不需要要检查的声明＆＃34;如果loading == true＆＃34;管他呢。

我还会设置2个区间变量，因为进度条和单击效果 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/

jQuery UI：动画不会在.progressbar（）完成后停止，两者都会消失

3 个答案: