Question

112

jQuery event order and waiting till animation complete

rated 0 times [ 118] [ 6] / answers: 1 / hits: 23472 / 15 Years ago, tue, march 9, 2010, 12:00:00

I have an slider animation but on clX.click event #close div hides before it is animated -250px left. How to wait till the animation completes and then hide #close div?

    $(document).ready(function() {

        $(#open).click(function() {

            if ($(#close).is(:hidden)) {

                $(#open).animate({

                    marginLeft: -32px

                }, 200);



                $(#close).show();

                $(#close).animate({

                    marginLeft: 250px

                }, 500);

            }

        });

        $(#clX).click(function() {

            $(#close).animate({

                marginLeft: -250px

            }, 500);



            $(#open).animate({

                marginLeft: 0px

            }, 200);



            $(#close).hide();

        });

    });

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reed

Add To Favorites

Follow

Total Points: 725

Total Questions: 85

Total Answers: 89

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

reed questions

1 npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Tue, Jul 5, 22, 00:00, 2 Years ago

1 Alpine.js: How do I access x-data from a function in an external file?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 I have an error : Cannot find module './utils'

Sun, Aug 16, 20, 00:00, 4 Years ago

1 react drag,drop, and connect arrow(or anything else) with animation between elements

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Lodash.uniqueId always returns 1

Thu, May 23, 19, 00:00, 5 Years ago

View All

answered 15 Years ago desiraeleandrah · Accepted Answer

You can add a callback function to the animation. It would be fired once the animation is finished.

$('#clX').click(function() {

  $('#close').animate({

    marginLeft: -250px

  }, 500, function() {

    // Animation complete.

    $(#close).hide();

    //i supose $this.hide() <br/>would work also and it is more efficient.

  });

});