Question

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

举个例子，我在window resize事件上调用函数：

$(window).resize(resize);

但现在我希望在animate事件中调用此函数（每个更改的像素（如.resize））。

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

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

Answer 1

您可以使用其步骤功能，例如：

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

请参阅animate()

中的:: 步骤

Answer 2

步骤功能是你的解决方案这是jquery文档所说的

步骤

类型：功能（现在的数字，补间补间）   为每个动画元素的每个动画属性调用的函数。此函数提供了修改Tween对象的机会，以便在设置之前更改属性的值。

请参阅 DEMO 你会看到宽度属性逐步改变

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

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

jQuery - 动画时调用函数

3 个答案: