Question

当动画功能降低高度＆amp; div的宽度然后任何其他函数可以并行运行。假设我想在它的高度和高度之前淡出我的div。宽度变为0零。基本上我想要当我的div的高度＆amp;宽度减少50％然后我想让它淡出。有可能吗？

animate有回调函数，但动画完成时会调用回调...我不想要。这是我的动画代码示例

$('#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。

Answer 2

你可以一个接一个地运行2个动画：

$('#my-id').animate({width: 50%, height: 50%}, 1000).fadeOut("slow");

Answer 3

将你的参数设置为50％，然后执行fadeOut，然后继续动画（但实际上最后一个动画我根本不需要，因为它已经不可见了。）

$('#my-id').animate({width: 50, height: 50}, 1000, function() {
   $(this).fadeOut('fast', function() { 
       $(this).animate({width: 0, height: 0}, 1000);
   });
});

或没有上一个动画：

$('#my-id').animate({width: 50, height: 50}, 1000, function() {
   $(this).fadeOut('fast', function() { 
       $(this).css({width: 0, height: 0});
   });
});

挂钩到jquery动画功能

3 个答案: