How to judge the animate function complete and show something?

Question

The code like this:

$(".hide").click(function(){
    $(".online-contact").animate({width: 'toggle',height: '100%'}, "fast");         
    $(this).hide();
    $(".show-class").show();
})

I want to show the div with the class of show-class when the the animate function complete,what can I do it?

Answer 1

Animate can take a callback which is a function that will run when the animation is complete, like so:

$(".hide").click(function(){ $(".online-contact").animate({width: 'toggle',height: '100%'}, "fast", function() {$(".show-class").show();});
 $(this).hide(); })

Answer 2

you can try:

$(".hide").click(function() {
    $(".online-contact")
        .animate({
            width: 'toggle',
            height: '100%'
        }, "fast",
        function() {
            // your code goes here..
            // this code will execute after the animation ended
        });