检测正在移动的DOM中的元素的位置

Detecting the position of an element in the DOM being moved

本文关键字：元素 位置 DOM 检测 移动      更新时间：2023-09-26

我一直在尝试找到一个工作示例，但我认为我缺少了一些非常基本的东西。我有一个函数来移动一个相对元素的位置，我想在左边的元素超过300px后停止元素的移动。我正在使用此代码移动元素：

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

我想用这样的代码来做一些事情，一旦DOM中的左侧位置达到300:

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

任何帮助都将不胜感激。

您可以简单地使用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();

如果我是你，我只需将元素的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>

相关文章：