jQuery：FineUploader 回调中的动画旋钮

Question

我正在使用 jQuery 库 FineUploader 和 Knob 来实现人造循环加载效果。

我当前的代码是：

    $('.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')
        });
    });

问题是“完成”函数将在“加载器”完成 75% 的动画之前运行。

我希望“完成”回调等到动画结束...

作为奖励，我希望动画能够实际采用正确的值 Fineuploader 百分比，这样我就不必伪造它！

我可以帮助您更好地理解吗？告诉我！

Answer 1

我不知道这是否是个问题，你在这里的submit function 中有一个错误的jquery css function：

.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')
    });
});

您可以尝试使用.promise() 和.done() 函数。

来自文档：

完成：

类型：函数（Promise 动画，布尔 jumpedToEnd ） 动画完成时调用的函数（其 Promise 对象已解析）。 （添加的版本：1.8）

More here to get

Answer 2

没有办法让完整的回调“等待”你。在 Fine Uploader 解析来自服务器的响应后，将执行完整的回调。时期。

如果您尝试编写自己的进度条，那么您可以并且应该使用进度回调。在内部，这是 Fine Uploader 使用的。