JQuery: загрузка контента не ждет завершения анимации

Question

$("#clickme").click(
            function(){
                $(this).slideToggle(1000);
                $(this).load("MYTEXT.txt");
                $(this).slideToggle(1000);
            }   
        )

Я хочу, чтобы новое содержимое моего HTML-элемента отображалось ТОЛЬКО после завершения первой анимации. Что происходит в этом коде, так это то, что он сначала скользит вверх и скользит вниз с новым контентом, но новый контент показывается до того, как будет создан эффект слайда!

Как я могу это исправить?

Answer 1

$("#clickme").click( 
            function(){ 
                $(this).slideToggle(1000, function () {
                    $(this).load("MYTEXT.txt", function () {
                        $(this).slideToggle(1000);
                    });
                });     
            }    
        )

Чтобы все происходило после друг друга, вы можете использовать обратные вызовы для запуска кода только после запуска предыдущей функции (что очень полезно для анимации и вызовов AJAX).

Answer 2

попробуйте это:

$("#clickme").click(
            function(){
                $(this).slideToggle(1000).load("MYTEXT.txt").slideToggle(1000);
            }   
        )

Answer 3

$("#clickme").click(function(){
      $(this).slideToggle(1000, function() {
          $(this).load("MYTEXT.txt", function() {
              $(this).slideToggle(1000);
           });
      });
});

Answer 4

Вы должны будете связать их как обратные вызовы

$("#clickme").click(function(){
    $(this).slideToggle(1000, function(){
        $(this).load("MYTEXT.txt", function(){
            $(this).slideToggle(1000);
        });
    });
});