jQuery: Animate Knob inside FineUploader callback

Question

I'm using jQuery libs FineUploader & Knob for a faux circular loading effect.

My current code is:

    $('.dial').val(0).trigger('change').delay(2000);
    var myKnob = $(".dial").knob({
        'min': 0,
        'max': 100,
        'readOnly': true,
        'width': 90,
        'height': 90,
        'fgColor': "47CBFF",
        'dynamicDraw': true,
        'thickness': 0.3,
        'tickColorizeValues': true,
        'skin': 'tron'
    })
     $('.dial').knob();
    $('#uploader-div').fineUploader({
        request: {
            endpoint: "/updateavatar",
            paramsInBody: true
        },
        debug: true,
        template: '<div class="qq-uploader">' + '<pre class="qq-upload-drop-area"><span>{dragZoneText}</span></pre>' + '<div class="qq-upload-button btn btn-success">{uploadButtonText}</div>' + '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' + '<ul class="qq-upload-list"></ul>' + '</div>',
    }).on('submit', function (event, id, name, responseJSON) {
        $('.qq-uploader').css({
            'background': 'rgba(0,0,0,.3'
        });
        $('canvas').fadeIn();
        $({
            value: 0
        }).animate({
            value: 75
        }, {
            duration: 3000,
            easing: 'swing',
            step: function () {
                $('.dial').val(Math.ceil(this.value)).trigger('change');
            }
        });
    }).on('complete', function (event, id, name, responseJSON) {
        $({
            value: 75
        }).animate({
            value: 100
        }, {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $('.dial').val(Math.ceil(this.value)).trigger('change');
            }
        });
        $('canvas').fadeOut();
        var image = $('#profile-pic img').attr('src');
        $('#profile-pic img').fadeOut(function () {
            $(this).attr('src', image).fadeIn('slow')
        });
    });

The problem is that the "complete" function will run before the 'loader' is finished animating the 75%.

I want the "complete" callback to wait until the animation finishes...

As a bonus, I would like the animation to actually take the correct valums fineuploader percentage so I don't have to fake it!

Can I help you understand better? Let me know!

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

I don't know if this could be a problem, you have a wrong jquery css function in the submit function here:

.on('submit', function (event, id, name, responseJSON) {
    $('.qq-uploader').css({
        'background': 'rgba(0,0,0,.3)'
    });  //-------------------------^--------missing ')' closing here

    .....// all other stuff

}).promise().done(function(){
    $({
        value: 75
    }).animate({
        value: 100
    }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            $('.dial').val(Math.ceil(this.value)).trigger('change');
        }
    });
    $('canvas').fadeOut();
    var image = $('#profile-pic img').attr('src');
    $('#profile-pic img').fadeOut(function () {
        $(this).attr('src', image).fadeIn('slow')
    });
});

You can try with .promise() and .done() functions.

From the docs:

done:

Type: Function( Promise animation, Boolean jumpedToEnd ) A function to be called when the animation completes (its Promise object is resolved). (version added: 1.8)

More here to get

you answered my question, but I think Ray is right. I'd like to use the value of the 'progress' callback for the animation. — Kevin Brown, Apr 11 '13 at 03:54

score 0 · Answer 2 · answered Mar 28 '13 at 13:18

0

There is no way to make the complete callback "wait" for you. The complete callback executes after Fine Uploader has parsed a response from the server. Period.

If you are trying to write your own progress bar, then you can and should make use of the progress callback. Internally, this is what Fine Uploader uses.

answered Mar 28 '13 at 13:18

Ray Nicholus

19,538
14
59
82

Ray, I'm getting values of '0' and '0'...is this possibly because my connection is very fast? – Kevin Brown Apr 11 '13 at 03:33
@KevinBrown Please open up a new thread if you have questions about the progress callback. Also, please show your code and include the file size and a description of your environment. – Ray Nicholus Apr 11 '13 at 03:35

jQuery: Animate Knob inside FineUploader callback

2 Answers2

From the docs:

done:

More here to get