檢測被移動的DOM元素的位置

Question

我一直在試圖找到一個這樣的工作示例，但我認爲我缺少一些非常基本的東西。我有一個移動相對元素位置的函數，我想在左元素超過300px時停止移動元素。我使用這個代碼移動的元素：

function tele_right(){ 
    $(".tele-wrapper").animate({"left": "+=15px"}, 25); 
} 

我想用這樣的代碼在DOM一旦做一些左側位置命中300：

if($('.tele-wrapper').css('left') == '300px') { 
    console.log('yay'); 
} 

任何幫助將是非常讚賞。

Answer 1

你可以簡單地實現這一點使用offset()和setTimeout：DEMO

function tele_right(){ 
    var left=$(".tele-wrapper").offset().left; 
    if(left<300){ 
     $(".tele-wrapper").animate({"left": "+=15px"}, 25); 
     setTimeout(tele_right,25); 
    } 
    else{ 
     alert('passed 300 pixels'); 
    } 
} 
tele_right(); 

Answer 2

如果我是你，我只希望你的元素的left屬性設置爲0，那麼將一路做動畫300px並定義其持續時間爲需要的值如下：

$(document).ready(function() { 
 
    $(".tele-wrapper").animate({"left": "300px"}, 1000); 
 
    // 1000ms = 1 second, set this to whatever you like 
 
});

.tele-wrapper { 
 
    position:relative; 
 
    left:0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tele-wrapper">tele-wrapper</div>