jQuery 动画设置回调抛出错误答案

【问题标题】：jQuery animation setup callback throws errorjQuery 动画设置回调抛出错误
【发布时间】：2014-11-16 02:05:23
【问题描述】：

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

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

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

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

在小提琴中，我尝试了 step 和 progress 以及它在那里的工作，但无法在我的代码中工作，我只是在寻找，是否有人在 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
    })
);

【问题讨论】：

您在生产环境中使用哪个 jQuery 版本？
根据 Firefox 源代码中的错误消息和一些窥探，这是一个缓存项目的问题，尚未完成加载/写入。发布的代码中没有任何内容表明您正在使用任何可能尚未加载的资源，因此我认为除非我们能看到更多代码，否则我们将很难为您提供进一步的帮助。
这是一个 iOS 应用吗？
没有。 .net 应用程序

标签： javascript jquery css jquery-animate

【解决方案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() 需要将您希望它运行的上下文作为第二个参数，而不是其他一些“完整”函数。

所以这里有一个稍微修改过的例子。你可以在this fiddle自己试试。

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

【讨论】：

上面的代码是运行代码，所以我不能删除$.proxy()，$.proxy()只是为了清除所有由动画引起的目标样式，比如重置它的原始宽度,top 等，这执行得很好，只是我在这里做了更改以使用 step 或 progress 回调。
好的。如果它有效，那么无论如何，按原样使用它。无论如何，您在问题中提到的错误代码对我来说看起来不像 JavaScript 错误。你确定你的问题不在其他地方吗？
问题是我必须将动画效果作为目标动画来操作，这就是为什么我需要使用 step 或 progress，但是一旦我编写 step 或 progress 回调方法，它就会抛出这个错误，甚至它dint catch 回调方法块，
您可以尝试将第三个参数删除到animate()（$.proxy()-part），仅用于测试。现在您正在使用某种允许的参数组合，我认为它只在以前有效，因为您的选项对象上的唯一属性是 duration，当您添加 step 时它会中断。跨度>
你得到“NS_ERROR...”的错误可能是由弹出窗口阻止程序引起的，我猜你是在firefox上测试你的代码:)

【解决方案2】：

您可以使用 Julian Shapiro 的 Velocity.js，它的动画（有争议）比 jQuery 和 CSS 更快（read this 更多）

它允许您使用回调，例如：

开始
进展
完成

喜欢：

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

【讨论】：