I want to implement a jQuery animation callback method progress or step,

but in either case I'm getting the following error:

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

I searched a lot but not able to find anything in context, I am kind of stuck here, please suggest what could cause this error?

In fiddle i tried with step and progress and its working there , but not able to get it worked in my code, I am just looking, has some one faced such kind of error in jquery animation?

The sample code is:

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

I want to implement a jQuery animation callback method progress or step,

but in either case I'm getting the following error:

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

I searched a lot but not able to find anything in context, I am kind of stuck here, please suggest what could cause this error?

In fiddle i tried with step and progress and its working there , but not able to get it worked in my code, I am just looking, has some one faced such kind of error in jquery animation?

The sample code is:

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

• javascript
• jquery
• css
• jquery-animate

• Which jQuery version do you use in your production environment? – GuyT Commented Sep 30, 2014 at 11:48
• According to the error-message and some snooping around in the sourcecode of Firefox, this is an issue with a cached item, that hasn't finished loading/being written. Nothing in the posted code suggests you are using any resources that might not have been loaded, so I think we will be hard pressed to help you any further unless we get to see a little more of the code. – Falle1234 Commented Sep 30, 2014 at 12:32
• Is this an iOS application? – SnareChops Commented Oct 1, 2014 at 4:28
• no. application – Md. Parvez Alam Commented Oct 10, 2014 at 11:26

2 Answers 2

You have some semantic errors going on here. I'm going to repost your code, formatted for easier reading:

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

First: animate() doesn't accept 3 parameters (at least not those 3 parameters). I'm not sure what you are trying to do with your css clearing method, but anything you wan't to happen after the animation is plete should be in the plete method that you add right next to the step method.

Second: $.proxy() needs to have the context in which you want it to run as the second parameter, not some other"plete"-function.

So here is a slightly modified example which works. You can try it yourself in 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');
            },
            plete: function () {
                alert('plete');// some further actions after animation pletes
            }
        }
    );

You could use Julian Shapiro's Velocity.js, which animations are (arguable) faster than jQuery and CSS (read this for more)

It allows you to use callbacks such as :

• begin
• progress
• plete

like :

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>");
        },
        plete: function (elements) {
            // some further actions after animation pletes
            console.log('pleted');
            $.proxy( ... ); // some css clearing method
        }
    });
}); // ready

Notice that you just need to replace .animate() by .velocity()

See JSFIDDLE