Question

I am trying to make this animation to stop after running the first time, but If I add the .stop(true) won’t work..any ideas??

Here is my jQuery.

function doDisplayError(){  
    $("#errors").animate (
            { 'top': '200px' }, {
                duration: '300',
                easing: 'easeOutQuad'
            }).delay(3000).animate (
            { 'top': '-200px' }, {
                duration: '200',
                easing: 'easeInBack'
            });
}

Answer 1

You can use a variable to determine if execution has occurred similar to this:

var animationExecuted = false;

function doDisplayError() {
    if(animationExecuted){
        return false;
    };
    console.log("executed");
    animationExecuted = true;

    $("#errors").animate({
        'top': '200px'
    }, {
        duration: '300',
        easing: 'easeOutQuad'
    }).delay(3000).animate({
        'top': '-200px'
    }, {
        duration: '200',
        easing: 'easeInBack'
    });
}​

DEMO – Only execute code once

However, it might a be better to see why it is executed more than once and if possible address that issue instead of compensating for it.