jQuery - call function when animate

问题

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...

回答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()

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

回答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.

来源：https://stackoverflow.com/questions/16646470/jquery-call-function-when-animate

标签

jquery

resize

jquery-animate