jquery - Hook jquery 动画函数

Question

当 animate 函数会减小 div 的高度和宽度时，任何其他函数都可以并行运行。假设我想在 div 的高度和宽度变为 0 零之前淡出它。基本上我希望当我的 div 的高度和宽度减少 50% 时，我想让它淡出。这可能吗？

动画有回调，但当动画完成时回调将被调用......这是我不想要的。这是我的动画代码示例

$('#my-id').animate({width: 0, height: 0}, 1000);

如果可能的话请告诉我解决方案和示例代码。谢谢

Answer 1

您可以传递step function到 animate()，它将为动画中的每个步骤调用。在此函数中，一旦元素的高度达到其原始值的一半，您就可以适本地设置元素的不透明度:

$("#my-id").animate({
    width: 0,
    height: 0
}, {
    duration: 1000,
    step: function(now, fx) {
        if (fx.prop == "height") {
            var threshold = fx.start / 2;
            if (now < threshold) {
                $(fx.elem).css("opacity", now / threshold);
            }
        }
    }
});

这应该如您所期望的那样运行，并并行运行两个效果。顺便请注意，如果元素的高度大于宽度，则生成的淡入淡出动画将更加流畅。如果您的元素的宽度大于高度，您可能需要监视其 width 属性，而不是其 height。