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>