Find distance between two DIVs using jQuery?

Question

I have two DIVs that I need to know the calculated browser distance (in height) of them. I have read about the offset feature but the examples were not written for the way I am trying to do this.

Example usage:

<div class="foo"></div>
<div class="bar"></div>

I want to know the distance between these two.

Please help me to find the distance dynamically with jQuery.

Answer 1

Something like this should work:

$('.foo').offset().top - $('.bar').offset().top

As long as each class only has one element on the page.
If they are not unique, give the two elements an ID and reference with that.

Answer 2

Use .offset():

$('.foo').offset().top - $('.bar').offset().top