动画 jquery 不工作

Question

我的 jQuery 代码

确实有一个小问题

Uncaught TypeError: undefined is not a function

<script type="text/javascript">
    function AnimateCloud() {
        $("#cloudAmu").animate({
            "left": "+150%"
        }, 5000, 'linear');
        return false;
    }

    function AnimateCloud2() {
        $("#cloudAmu").animate({
            "right": "+150%"
        }, 5000, 'linear');
        return false;
    }

    $(document).ready(
        AnimateCloud().then(AnimateCloud2())
    );
</script>

你知道问题出在哪里吗？

此致

高迪曼

Answer 1

您尝试调用 then() 函数，但 AnimateCloud() return 错误。

function AnimateCloud(complete) {
    $("#cloudAmu").animate({
        "left": "+150%"
    }, 5000, 'linear', complete);
}

AnimateCloud(function() {
    AnimateCloud2()
});

Answer 2

您正在尝试调用 AnimateCloud() 上的函数，它不是 jQuery 对象。您可以在 AnimateCloud() 完成动画后从内部调用 AnimateCloud2()，请参见下面的代码

<script type="text/javascript">
    function AnimateCloud() {
        $("#cloudAmu").animate({
            "left": "+150%"
        }, 5000, 'linear', function(){
          AnimateCloud2();
       });

        return false;
    }

    function AnimateCloud2() {
        $("#cloudAmu").animate({
            "right": "+150%"
        }, 5000, 'linear');
        return false;
    }

    $(document).ready(function(){
        AnimateCloud();
    });
</script>

Answer 3

问题是因为您的函数 return 是 false 的布尔值，它没有 then() 方法。

要将调用链接到您的函数，您需要 return 从对 animate() 的调用中 promise。试试这个：

function AnimateCloud() {
    return $("#cloudAmu").animate({
        "left": "+150%"
    }, 5000, 'linear').promise();
}

function AnimateCloud2() {
    return $("#cloudAmu").animate({
        "right": "+150%"
    }, 5000, 'linear').promise();
}

$(document).ready(function() {
    AnimateCloud().then(AnimateCloud2)
});

请注意，AnimateCloud() 和 AnimateCloud2() 似乎都包含相同的逻辑并且可以改进。

Answer 4

因为 jquery 中的动画方法在上一个动画完成之前不会执行。您可以使用

$(document).ready(function(){
         AnimateCloud();
        AnimateCloud2();
});

动画 jquery 不工作

Animate jquery not working

javascript

jquery

jquery-animate