How do I run a function after fadeIn without a callback?

Question

Possible Duplicate:
Detecting when a div's height changes using jQuery
jQuery: Get height of hidden element in jQuery

Is there a way to detect the completion of a fadeIn event with jQuery so I can fire a function on completion?

I understand fadeIn has a built in callback function but this requires me to directly affect the fadeIn code. I don't have access to that code so I want to add an event listener or something to detect when an item has faded in.

The reason I want to do this is because I have some code that detects the height of a div, but on pageload this div element is hidden. I want to detect the height of the div after it is faded in.

@Antonio, does the code that calls `fadeIn()` always run before your own code? — Frédéric Hamidi, Aug 02 '12 at 11:32
it runs on click. I then want to get the height of the element. I'm only having problems because it starts off with the CSS of display:none I just need the height of that div. — Antonio Moore, Aug 02 '12 at 11:44
@Antonio, better see [this question](http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery), then. — Frédéric Hamidi, Aug 02 '12 at 11:48

score -1 · Answer 1 · answered Aug 02 '12 at 11:34

You could utilise the DOMAttrModified event, although this will depend on the browsers you need to support as it's still quite experimental.

But since jQuery's animate() changes the style attribute of element(s), it's suitable.

//your code
var div = $('#some_div'), target_height = 100;
div.on('DOMAttrModified', function(evt) {
    if ($(this).height() == target_height) do_something();
});

//some code in another, untouchable script
$('#some_div').animate({height: 100});

How do I run a function after fadeIn without a callback?

1 Answers1