Question

我一直试图找到一个有效的例子，但我想我错过了一些非常基本的东西。我有一个函数来移动一个相对元素的位置，我想在左元素超过300px后停止元素移动。我正在使用此代码移动元素：

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

我想使用类似这样的代码在DOM中执行一次左侧位置命中300：

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

非常感谢任何帮助。

Answer 1

如果我是你，我只需将元素的left属性设置为0，然后将动画一直运行到300px并将其持续时间定义为所需的值如下：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: