jQuery 动画移动

Question

我正在尝试制作一个方块在 window 周围随机移动的动画，直到您单击它为止，此时它会消失，而另一个方块会出现。但是我遇到了一个奇怪的问题，块有时会在屏幕上跳来跳去而不是四处滑动。

不太确定我的动画有什么问题，希望有人能检查一下。谢谢！

var randomNumber = function(max) {
  return Math.floor(Math.random() * (max - 0)) + 0;
}

var newPosition = function() {
  var h = $(window).height() - width;
  var w = $(window).width() - width;
  var newH = randomNumber(h);
  var newW = randomNumber(w);
  return [newH, newW];
}

var moveBlock = function() {
    var newCoor = newPosition();
    $('.gameBlock').animate({
        top: newCoor[0], 
        left: newCoor[1] 
    }, {
        duration: 1500, 
        complete: function() {  
            moveBlock();
    }
    });

};

这是我移动方块的功能，剩下的在http://jsfiddle.net/L1qqo06x/。

Answer 1

您需要.stop()队列才能删除块。

前一个对象的队列实际上仍然是运行并影响新对象。 .stop() 终止队列以便它可以重新开始。

我在 .remove() 之前添加了 .stop()，现在它正常运行了：http://jsfiddle.net/L1qqo06x/1/

$("body").delegate(".gameBlock", "click", function() {
    $(".gameBlock").stop().remove();
    game();        
});

Answer 2

点击后就开始跳动了，因为你是在重启动画，但之前的还在排队。你把它应用到 .gameBlock class，新的块仍然有 class，你必须在重新设置之前停止它。

$(document).ready(function() {
  game();

$("body").delegate(".gameBlock", "click", function() {
    $(".gameBlock").stop().remove();
    game();        
});


});

jQuery 动画移动

jQuery animation movement

javascript

jquery

jquery-animate