Question

我想做的功能是动画div位置改变而不能正常工作:(

$(document).ready(function() {
function moveAnimate(x, y, element) {
    var leftX = document.getElementById.style.left;
    var topY = document.getElementById.style.top;
        leftX += x
        topY += y
           $('"#"+element').animate(
            { 
                "top": "topY", 
                "left": "leftX",
            },
            1000);

};
});

我打电话给函数：

<div id="divv" onclick="moveAnimate(300, 400, divv)"></div>

Answer 1

再次检查您的代码JS语法。 document.getElementById是一个方法，因此它必须是：

var leftX = document.getElementById(element).style.left;
var topY = document.getElementById(element).style.top;

动画功能应该是这样的：

$('#'+element).animate({
    //your code here
})

Answer 2

您的moveAnimate定义在$(document).ready(function() {})范围内但是，您尝试从全局上下文中调用它。

您需要在$(document).ready之外定义您的功能，以便在onclick属性中使用它。
更好的是，使用jQuery.on('click')附加处理程序：

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

    leftX += x;
    topY += y;

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

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

请注意，我还修复了moveAnimate函数中的一些语法和逻辑错误。

Answer 3

您的代码错了，我做了一些更改：

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": leftX, 
      "left": topY,
    },
    1000);

};

你应该阅读文件...... http://api.jquery.com/animate/

动画js / jquery函数不起作用

3 个答案: