Animate jquery not working

Question

I do have a small issue with my jQuery Code

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>

Do you have any idea what is the problem?

Best regards

Goldiman

Answer 1

The problem is because your functions are returning a boolean value of false, which does not have a then() method.

To chain the calls to your functions you need to return the promise from the calls you make to animate(). Try this:

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)
});

Note that it appears that both AnimateCloud() and AnimateCloud2() contain the same logic and could be improved.