Обнаружение перемещения элемента в 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>