jquery - jQuery - 动画时调用函数

Question

是否可以在.animate事件中调用某些函数？我必须为resize()某个 div 上的每个调整大小事件调用函数。

例如，我在窗口调整大小事件上调用函数：

$(window).resize(resize);

但现在我想在动画事件中调用这个函数（每个改变的像素（像.resize这样））。

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

但这不是我想要的，因为我希望一直调用 resize 函数，而不仅仅是最后......

Answer 1

你可以使用它的 step 函数，比如：

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

参见animate()中的:: step

Answer 2

step 函数是您的解决方案，这是 jquery 文档所说的

步

类型：Function(Number now, Tween tween) 为每个动画元素的每个动画属性调用的函数。此函数提供了修改 Tween 对象以在设置之前更改属性值的机会。

看这个演示 你会看到宽度属性逐步变化

$( "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
        });

将您的代码添加到第二个功能块。