jQuery animation setup callback throws error

Question

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

Answer 1

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
• complete

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

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

See JSFIDDLE

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

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 complete should be in the complete 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"complete"-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');
            },
            complete: function () {
                alert('complete');// some further actions after animation completes
            }
        }
    );