jQuery callback not firing when declaring complete:?

Question

I have an animation to remove content from the screen by scaling the opacity down to 0. I then want to set the css property of visibility to hidden. In order to get the sequence correct, I have been trying to use an alert box to know when the event triggers. The alert box does not show. Here is my code:

                $('.save-hidden').animate({
                    opacity: 0, 
                    complete: function() { alert('Executes now.');}
                }, 2000);

Is my syntax correct for calling the function? As I said, the alert never displays.

I intend to replace it with the following call:

                $('.save-hidden').css({ visibility: "visible"});

Thanks!

Answer 1

jQuery's animate() supports two different types of syntax, the first one being

.animate( properties [, duration ] [, easing ] [, complete ] )

which you would use this way

$('.save-hidden').animate({opacity: 0}, 2000, function() { 
    alert('Executes now.');}
});

The second syntax, which looks like the one you're trying to use, would be

.animate( properties, options )

Here you could use two objects, the first one containing the properties to animate, and the second one containing the options, like complete() etc.

In other words, the complete callback does not belong in the object with the properties to animate, but one can add another object as the second argument, containing properties like duration, complete, queue etc.
Note that this syntax would have all callbacks, easings etc. in the options object, and only accept two arguments.

$('.save-hidden').animate({
    opacity: 0
}, {
    complete: function() { 
        alert('Executes now.');
    },
    duration : 2000
});