Question

我的jQuery代码确实存在一个小问题

未捕获的TypeError：undefined不是函数

<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>

你知道这是什么问题吗？

祝你好运

Goldiman

Answer 1

您尝试调用then（）函数，但AnimateCloud（）返回false。

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

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

Answer 2

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

<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

问题是因为你的函数返回的布尔值为false，没有then()方法。

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

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中的animate方法直到上一个animate完成才执行..你可以使用

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

动画jquery无法正常工作

4 个答案: