Question

when animate function will decrease the height & width of div then any other function can run parallelly. suppose i want to fadeout my div before it’s height & width becomes 0 zero.
basically i want that when my div’s height & width decrease 50% then i want to make it fadeout. is it possible?

animate has callback but callback will be invoke when animate complete..which i don’t want.
here is sample my animate code

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

if possible then please tell me the solution with sample code. thanks

Answer 1

You can pass a step function to animate(), and it will be called for each step in the animation. In this function, you can set the element’s opacity appropriately as soon as its height reaches half of its original value:

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

This should behave as you expect and run the two effects in parallel. In passing, note that the resulting fading animation will be more fluid if the element is taller than it’s wide. If your element is wider than it’s tall, you might want to monitor its width property instead of its height.