CODEWITHSUNDEEP
javascriptjqueryjquery-animate
goldiman
goldiman

Reputation: 187

Animate jquery not working

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

Upvotes: 3

Views: 74

Answers (4)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You are trying to call function on AnimateCloud() which is not a jQuery object. You can call AnimateCloud2() from inside AnimateCloud() when it completes its animation, see below code

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

Cause animate method in jquery not execute till the previous animate finished.. you can just use

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

Upvotes: 1

bln
bln

Reputation: 320

you try to call a then() function but AnimateCloud() return false.

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

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

Upvotes: 1

Related Questions