javascript - 动画鼠标点击 JQuery？

Question

我对我的 JavaScript 操作有了基本的了解。

我的 JavaScript 的目的是让 id 'player' 的图像移动到我用鼠标单击的位置，只有当我点击 id 为 'stage' 的 div 时，动画持续 3 秒。

同时，当动画运行时，头部应该变为“玩家正在移动”，而不是当它静止时显示“玩家静止”。

现在，在 Chrome 中(可能是 Chrome 的一个错误)JS 的基本功能可以正常工作。但是，它似乎超过了我在第一轮单击鼠标的位置，然后当我再次单击“舞台”div 时几乎没有移动。

如果有人看到我可能在哪里遇到问题，请告诉我!

这是我编辑的 JQuery:

$(document).ready(function(){
$('#stage').click(function(e){
    $('#header h1').html('Player is moving!');
    $('#player').animate({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
    }, 3000, function(){
        $('#header h1').html('Player is standing still...');
    });     
});

});

我已经解决了我的 CSS 问题，所以不用担心，但 CSS 的代码位于下方，以防有人认为问题出在其中。

谢谢!

编辑:

这是 CSS。该问题已解决，但为方便起见，如果您认为图像超出图像的问题可能出于任何原因在:

#header {
width: 600px;
margin: 20px auto 10px;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
#header h1 {
text-align: center;
margin: 0;
}
#stage {
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
position: relative;
}
#player {
position: absolute;
width: 36px;
}

Answer 1

穷人的例子:jsfiddle但它适用于 FF 和 Chrome。另外，我很好奇你丢失了什么样式，总是应用简单的颜色样式。

所以需要更多信息，你能分享完整的css吗？

更新:我仍然没有在 chrome 中看到问题(以 fiddle 为例)将#stage 更改为类似

#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}

您的播放器 vs 页面在其位置或您可以点击的位置上撒谎。我希望舞台成为页面上的固定元素，不会移动。我没有看到任何其他原因(在您的 CSS 或 jQuery 中)为什么它会过冲。