1

我正在尝试使用 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 中单击时，它上面的标题应该会发生变化，并且图像应该移动到人们在舞台上单击的位置。

4

1 回答 1

5

两件事情：

$('#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/

于 2012-09-26T22:26:41.177 回答