CODEWITHSUNDEEP
jqueryhtmljquery-uianimationprogress-bar
017Bluefield
017Bluefield

Reputation: 161

jQuery UI: animation won't stop after .progressbar() finishes and both fade away

I'm trying to rig a .progressbar() and a flashing <span> element so that, when the .progressbar() finishes loading, both disappear. Instead, the <span> element doesn't stop flashing, even after it fades away. It just keeps going. I've tried using a boolean variable and some if statements, but that doesn't work.

Here's a link to what I've got so far: http://jsfiddle.net/mnbishop017/XqH6B/

Upvotes: 0

Views: 259

Answers (3)

nomayann
nomayann

Reputation: 156

  • You can also use the option "complete" of the progressbar function. It makes your code cleaner since you don't need any counter nor if statement to check "if loading == true" or whatever.

  • I would also set 2 interval variables since the progress bar and the blicking effect ar not synchronized:

    $(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/

Upvotes: 1

lucasjackson
lucasjackson

Reputation: 1525

I would suggest a few changes as shown in the following fiddle: 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);
});

  1. make use of clearInterval and clearTimeout. You can pass the values returned from setInterval and setTimeout respectively to stop these from firing once your .progressbar() has reached its max value.

  2. Separate the fadeIn/fadeOut functionality from the progress function. This way, your fadeIn/fadeOut logic won't be affected every time progress() is called.

  3. Make sure that the interval you specify in the setInterval call allows for your animations to complete. Initially you have a 1000 ms interval specified for animation operations that will take 4100 ms to complete.

Upvotes: 3

Zomry
Zomry

Reputation: 1161

It behaves that way because you are setting an interval, but you don't stop it.

Try the following:

First, place your timer in a variable, e.g.:

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

Then, evaluate each interval whether the timer may be deleted. This might be the easiest if you evaluate the value in the interval itself. Pseudo-example:

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

This should do the trick. :)

Upvotes: 2

Related Questions