Div不移动+播放器移动

Question

我的功能不起作用，我的div不移动，怎么了？

function moveAnimate(x, y, element) { 
    var leftX = document.getElementById(element).style.left; 
    var topY = document.getElementById(element).style.top; 

    leftX += x; 
    topY += y; 

$(element).animate({ 
    "top": topY, 
    "left": leftX, 
}, 1000);  
}; 

$(document).ready(function() { 
    $("#divv").on("click", function() { 
     moveAnimate(400, 400, this); 
    }); 
}); 

这是正常的div：

<div id="divv"></div> 

和正常的CSS：

#divv { 
     position: absolute; 
     height: 100px; 
     width: 100px; 
     background-color: blue; 
     left: 100px; 
     top: 100px; } 

我不知道什么是错与此代码，为什么它不工作？

而且我不知道如何对玩家运动做脚本，有什么想法？我只想在某个div的中间设置一名玩家，当我点击某处玩家将会去那里。有人可以用最简单的方式来做这个小小的脚本，然后给我解释一下吗？

Answer 1

我改变了鳕鱼现在的股利将移动到的位置，当你在文档中点击鼠标：

var posX = 0; 
 
    var posY = 0; 
 
    var currentPositionX = 0; 
 
    var currentPositionY = 0; 
 

 
function moveAnimate(x, y, element) { 
 
    var elementPosition = $(element).position(); 
 
    var leftX = elementPosition.left; 
 
    var topY = elementPosition.top; 
 

 
    leftX = x; 
 
    topY = y; 
 

 
$(element).animate({ 
 
    "top": topY, 
 
    "left": leftX, 
 
}, 1000);  
 
}; 
 

 
$(document).ready(function() { 
 
    $(document).on("click", function(e) { 
 
     moveAnimate(e.pageX, e.pageY, "#divv"); 
 
    }); 
 
});

#divv { 
 
     position: absolute; 
 
     height: 100px; 
 
     width: 100px; 
 
     background-color: blue; 
 
     left: 100px; 
 
     top: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divv"></div>