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/

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

1 个答案: