0

我正在使用 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 百分比，所以我不必伪造它！

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

4

2 回答 2

0

我不知道这是否可能是一个问题，你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()功能。

从文档：

完毕：

类型：Function(Promise animation, Boolean jumpedToEnd) 动画完成时调用的函数（它的 Promise 对象被解析）。（添加的版本：1.8）

更多在这里得到

于 2013-03-28T05:31:49.847 回答
0

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

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

于 2013-03-28T13:18:14.987 回答