javascript - 将图像动画化到鼠标单击的位置

Question

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

html 的 div 的 id 为“stage”，图像的 id 为“player”。我已经成功地让标题在用户点击舞台时更新，但是一旦我添加了另一个 JQuery 以使图像移动到我在舞台上的鼠标点击，这两个都不起作用。

也许这很明显，因为我是 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);
    });
});

总而言之，当有人点击舞台 div 时，其上方的标题应该会发生变化，并且图像应该移动到用户在舞台上点击的位置。

Answer 1

两件事:

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

有语法错误。应该是:

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

请注意，我省略了 'px'，因为它不是必需的。

你可以看到它在这里工作:http://jsfiddle.net/VBzUw/