Javascript 将图像设置为鼠标单击位置的动画

我正在尝试使用JQuery将图像动画化到我在div上单击鼠标的位置

html的div的id为“stage”，图像的id为“player”。当用户点击stage时，我已经成功地获得了要更新的标题，但是一旦我添加了另一个JQuery，让图像移动到我的mouseclick上，这两种方法都不起作用

也许这很明显，因为我是JQuery新手，但希望有人能发现我的错误

以下是我的JQuery代码：

$(document).ready(function(){
//alert('It works');
    $('#stage').click(function() {
        $('#header').html('Image is moving!');
    });

    $('#stage').click(function(e){
        $('#player').animate({
            top: e.pageY + 'px';
            left: e.pageX + 'px';
         }, 800);
    });
});

总之，当有人单击stage div时，上面的标题应该会更改，图像应该移动到该人单击stage的位置。

两件事：

$('#player').animate({
    top: e.pageY + 'px';
    left: e.pageX + 'px';
}, 800);

有语法错误。应该是：

$('#player').animate({
    top: e.pageY,
    left: e.pageX
}, 800);

请注意，我取消了

'px'

，因为它不是必需的

您可以看到它在这里工作：

两件事：

$('#player').animate({
    top: e.pageY + 'px';
    left: e.pageX + 'px';
}, 800);

有语法错误。应该是：

$('#player').animate({
    top: e.pageY,
    left: e.pageX
}, 800);

请注意，我取消了

'px'

，因为它不是必需的

---

您可以看到它在这里工作：

听起来像个游戏。。你有没有考虑过碰撞？我猜它应该像？听起来像个游戏。。你有没有考虑过碰撞？我猜它应该像？