0

今週の初めからこれを機能させようとしてきましたが、わかりませんでした。HTML ファイルには 2 つの要素があります。これらは同じ垂直方向のレーンにあり、要素 1 はボタンをクリックするたびに左に 60em 水平方向に移動しています。これら 2 つの要素の位置を比較し、要素 1 が要素 2 を通過したかどうかを if/else ステートメントで検出する必要があります。それが通過したら、 element1 を初期位置に移動して最初からやり直したいと思います。しかし、if ステートメントが発砲しない場合は、常に else ステートメントにジャンプします。

次のプロパティを比較してみました。

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

以下のような位置を比較しようとしました：

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

あなたが私に答えを与えるか、別の投稿に私を導くことができれば、私はそれを感謝します. 前もって感謝します。

編集:私が使用するスタイルは以下のとおりです。

.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;
}

そして、最初にこれを言及する必要がありました: element1 は element2 の中にあります:

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

1 に答える 1

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');
  }
于 2012-05-05T05:11:32.487 に答える