jQuery - call function when animate

Question

Is it possible to call some function in .animate event? I have to call resize() function for every resize event on some div.

For an example, I call function on window resize event:

$(window).resize(resize);

But now I wish to call this function inside animate event(every changed pixel(like .resize does)).

selector['el']['box'].animate({width:selector['el']['box'].width() - 250}, 500);
selector['el']['box'].promise().done(function() {resize();});

But this is not what I want, because I wish resize function to be called all the time, not only on the end...

Answer 1

you could use its step function, like:

selector['el']['box'].animate({width:selector['el']['box'].width() - 250}, 500,
step: function( currentStep ){       
    //step animation complete
   //do something here
});

See :: step in animate()

Answer 2

step function is ur solution here is what jquery documentation says

step

Type: Function( Number now, Tween tween ) A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

See this DEMO you will see width properties changing step wise

$( "div").css({
    position: "fixed",
    left: "50px"
})
.animate(
{
    width: 1000
},
{
    duration: 500,
    step: function( currentLeft, animProperties ){
        $( "span" ).html( $( "span" ).html()+"<br>value:"+currentLeft+" state:"+animProperties);
        console.log( "Left: ", currentLeft );
    }
});

Answer 3

  selector['el']['box'].animate({
          // for example 
          opacity: 0.25,
          left: '+=50',
          height: 'toggle'
        },
        {
        duration: 500,
        step: function() {
          //add your code here
        });

Add your code to second function block.