javascript 在计数器结束时移动到 NextSibling div 偏移量

Question

这是我的例子：
https://jsfiddle.net/nerdkal/txmonrkf/

我的代码可以：找到下一个兄弟姐妹，让下一个兄弟姐妹（id，top，left）进行动画处理，它确实如此。但是在 "jumps" 达到 0 次跳跃之前我不能做的事情。

这就是我要移动的：

#box {
    top: 60px; left: 76px;width: 33px; height: 29px; position: absolute; background-color: yellow; z-index:1;
}

这是我的一部分：

$(document).ready(function(){
    var jumps = 2;

    var start = document.getElementById("start").id;
    var prevhouse = document.getElementById(start).previousElementSibling.innerHTML; 
    var nexthouse = document.getElementById(start).nextElementSibling.innerHTML; 

    var nexthouseX = 121;
  document.getElementById(nexthouse).offsetTop;
    var nexthouseY = 40;
  document.getElementById(nexthouse).offsetLeft;

$("button").click(function(){
      $('#box').animate({left: nexthouseX +'px', top: nexthouseY +'px'},1500);
      start = document.getElementById(start).nextElementSibling.innerHTML;
      jumps--;
      $('#result').html("jumps: " + jumps + "<br>"+ start); 
      });
      $('#result').html("jumps: " + jumps +"<br>"+ start); 

});

#results 只是为了通知我还有多少次跳跃以及我在哪里（房子）。

我需要什么：找到一条通往我的盒子的路在 2 秒后再跳一次（或者我可以设置多次跳转），我知道我需要一个循环但我自己做不到。

我需要一些帮助，从现在开始，我想对你阅读它表示感谢，也许对你们中的许多人来说这可能很容易，但对我来说，这太难了。谢谢。

Answer 1

这将每 2 秒增加一次跳跃次数，如果没有剩余跳跃次数，则停止用户跳跃。

$(function() {
  var jumps = 2;
  var nexthouse = $("#start");

  $("button").click(function() {

    if (jumps > 0) {
      nexthouse = $(nexthouse).next();
      var nx = nexthouse.offset().top + 16;
      var ny = nexthouse.offset().left + 8;
      $('#box').animate({
        left: ny + 'px',
        top: nx + 'px'
      }, 500);
      jumps--;
    }
  });

  setInterval(function() {
    jumps++;
  }, 2000);
});

JSFiddle

如果您不熟悉 jquery，请随时提出任何问题，或查看文档，尤其是 $(function(){})、offset()、next() 和 setInterval(f(){})。哦，如果这是您需要的，请标记为已接受。

javascript 在计数器结束时移动到 NextSibling div 偏移量

javascript move to NextSibling div offset while counter ends

jquery

for-loop

setinterval

jquery-animate