javascriptの2つの要素の位置を比較する方法

Question

私は今週の初めからこの作業をしようとしていましたが、それを把握することはできませんでした。 HTMLファイルには2つの要素があります。それらは同じ垂直レーン上にあり、要素1は各ボタンをクリックすると60emsを左に水平に移動します。これらの2つの要素の位置を比較し、element1がif/elseステートメントでelement2を渡したかどうかを検出する必要があります。それが通過すると、私はelement1をその最初の位置に移動してやり直したいと思います。しかし、文が決して撃たれなければ、それは常にelse文にジャンプする。あなたは私に答えを与えるか、私には理解される別のポストに私を指示することができた場合は

$(function() { 
     $("button").click(function() { 
      var position1 = $('#element1').css("left"); 
      var position2 = $('#element2').css("left"); 
      if (position1 <= position2) { 
       $("#element1").animate({left:'+=240em'}, 600); 
      } 
      else { 
       $("#element1").animate({left:'-=60em'}, 600); 
      } 
     }); 
    }); 

：

$('#elemet1').position(); 
$('#elemet1').position().left; 
$('#elemet1').offset(); 
$('#elemet1').offsetLeft; 
$('#elemet1').css("position"); 
$('#elemet1').css("left"); 
$('#elemet1').css("margin"); 
$('#elemet1').left; 

私は以下のような位置を比較してみました：

私は、次の特性を比較しようとしていますそれ。前もって感謝します。

EDIT：

.element2 { 
    position: relative; 
    width: 60em; 
    height: 40em; 
    bottom: 8em; 
    background: rgba(242, 210, 139, 0.6); 
    border-radius: 1.2em; 
    z-index: 1; 
    overflow: hidden; 

#element1 { 
    position: absolute; 
    margin-left: 180em; 
    width: 60em; 
    height: 40em; 
    z-index: 1; 
}   

そして、私が最初にこれを言及しておく必要があります：私が使用したスタイルが以下である要素1は要素2の内側にある：

<div class="element2"> 
     <img id="element1" src="image/bg1.png" /> 
</div> 

Answer 1

これはあなたの現在の位置を与えます要素：

$('#element').position().left; 

文書に対して相対的な位置が必要な場合は、親要素）を使用することができます：

$('#element').offset().left; 

異なる要素のこれらの戻り値を直接比較することができます。ここでは私のために動作するいくつかのサンプルコードがありますが、常にピクセル値を返すので解析する必要はありません。

var pos = Math.max($(w).scrollTop(), 38), 
     top = $(ballon).position().top, 
     dist = Math.abs(pos-top), 
     time = dist > 1000 ? 2000 : dist/0.15; 

    if (pos + $(w).height() >= pHeight) { 
    pos = pHeight - bHeight - gHeight; 
    $(ballon).animate({'top': pos}, time, 'easeInOutSine'); 
    } 
    else if (dist > 150 || pos < 100) { 
    $(ballon).animate({'top': pos}, time, 'easeInOutBack'); 
    }