Question

我正在使用jQuery libs FineUploader＆amp;用于人造圆形装载效果的旋钮。

我目前的代码是：

    $('.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％之前运行。

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

作为奖励，我希望动画实际上采用正确的valums fineuploader百分比，所以我不必假装它！

我可以帮助您更好地理解吗？让我知道！

Answer 1

我不知道这是否有问题，jquery css function这里有错误的submit 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 animation，Boolean jumpedToEnd）动画完成时要调用的函数（其Promise对象已解析）。（版本添加：1.8）

More here to get

Answer 2

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

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

jQuery：FineUploader回调中的Animate旋钮

2 个答案:

来自文档：

完成的：

More here to get