Question

我有以下内容：

var player = $('#player');
//Checks to see which key is pressed down

$(window).on('mousedown', function (e) {
    console.log(e.offsetX + ', ' + e.offsetY);

    player.animate({
        left: e.offsetX + 'px',
        top: e.offsetY + 'px'
    }, 500);
});

我想要实现的是当我点击屏幕上的某个位置时，图像会移动到该位置，但如果我在移动动画中间再次点击，它应该会转到我点击的最后一个位置首先进行第一个动画。

Full fiddle

谢谢！

Answer 1

在player.stop(false);之前致电player.animate(...);。它将停止当前正在运行并排队播放器对象的动画。

Answer 2

要处理多次点击，您需要创建一个池，一个由另一个函数控制的函数数组，因此当您单击正文时，您将添加一个移动图像的新函数。 / p>

下面，我将展示一段代码，介绍如何创建和推送一系列函数：

var listRuns = [],
    ind = 0;

$('#btnRun').click(function(){
  var message = document.getElementById("txtMsg").value;

  listRuns.push(function(){
    run(message);
  });
});

然后，您需要另一个控制此数组执行的函数，如下所示：

var runAll = function(){  
  if (listRuns.length>ind){
    listRuns[ind]();
    ind++; 
  }
};

var idInterval = setInterval(function(){
  runAll();
},1000);

因此，您创建了一份执行投票，请查看this example以获取更详细的信息。

在移动对象时处理多次单击

2 个答案: