jQuery动画设置回调引发错误

Question

我想实现jQuery动画回调方法的进度或步骤，

但无论哪种情况，我都会遇到以下错误：

NS_ERROR_IN_PROGRESS: Component returned failure code: 0x804b000f (NS_ERROR_IN_PROGRESS) [nsICacheEntry.dataSize]

我进行了很多搜索，但无法在上下文中找到任何内容，我有点卡在这里，请提出可能导致此错误的原因？

摆弄我尝试了步骤和进度及其在那儿的工作，但无法在我的代码中使它工作，我只是在寻找，有人在jquery动画中遇到过此类错误吗？

示例代码是：

    this.taskHandle.find('img').stop(true, true).animate({
        //todo//
        top: vtop, // this.taskHandle.outerHeight(),
        //'top': 0 - $('.target.upper').height(),
        width: 0,
        opacity: 0
    }, {
        duration: 2000,
        step: function(){
            console.log('I am called');
        }
    },

    $.proxy(function() {
        // some css clearing method
    }, {
        // some further actions after animation completes
    })
);

Answer 1

您在这里遇到一些语义错误。 我将重新发布您的代码，其格式便于阅读：

this.taskHandle.find('img')
    .stop(true, true)
    .animate(
        {
            //todo//
            top:  vtop , // this.taskHandle.outerHeight(),
            //'top' : 0 - $('.target.upper').height(),
            width : 0,
            opacity : 0
        },
        {
            duration:2000,
            step: function() {
                console.log('I am called');
            }
        },
        $.proxy(
            function() {
                // some css clearing method
            },
            {
                // some further actions after animation completes
            }
        )
    );

首先： animate()不接受3个参数（至少不接受这3个参数）。 我不确定您要使用css clearing method做什么，但是动画完成后您不希望发生的任何事情都应该位于您在step方法旁边添加的complete方法中。

第二： $.proxy()需要具有您要在其中运行的上下文作为第二个参数，而不是其他一些“完成”功能。

因此，这是一个稍作修改的示例，可以正常工作。 您可以在这个小提琴中自己尝试。

var vtop = 100;

$('div')
    .stop(true, true)
    .animate(
        {
            top:  vtop,
            width: 0,
            opacity : 0
        },
        {
            duration: 2000,
            step: function() {
                console.log('I am called');
            },
            complete: function () {
                alert('complete');// some further actions after animation completes
            }
        }
    );

Answer 2

您可以使用朱利安·夏皮罗（Julian Shapiro）的Velocity.js ，该动画（可以说是）比jQuery和CSS更快（有争议）（有关更多信息，请阅读此内容）

它允许您使用回调：

• 开始
• 进展
• 完成

喜欢 ：

var vtop = 100;
jQuery(document).ready(function ($) {
    $('div').find("img").velocity({
        top: vtop,
        width: 0,
        opacity: 0
    }, {
        duration: 2000,
        begin: function (elements) {
            console.log('begin');
        },
        progress: function (elements, percentComplete, timeRemaining, timeStart) {
            $("#log").html("<p>Progress: " + (percentComplete * 100) + "% - " + timeRemaining + "ms remaining!</p>");
        },
        complete: function (elements) {
            // some further actions after animation completes
            console.log('completed');
            $.proxy( ... ); // some css clearing method
        }
    });
}); // ready

注意 ，您只需要用.animate()替换.velocity()

参见JSFIDDLE