CODEWITHSUNDEEP
jqueryloadslidetoggle
user1091856
user1091856

Reputation: 3158

JQuery: content loading doesn't wait for animation to be finished

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

I want the new content of my HTML element to be displayed ONLY after the first animations is finished. What happens in this code is, it first slides up, and slides down with new content, but the new content is shown before the slide up effect is done!

How can I fix this?

Upvotes: 1

Views: 240

Answers (4)

Jasper
Jasper

Reputation: 76003

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

To get things to happen after eachother, you can use callbacks to run code only after the previous function has run (which is very useful for animations and AJAX calls).

Upvotes: 1

adeneo
adeneo

Reputation: 318342

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

Upvotes: 0

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

try this:

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

Upvotes: 0

Ortiga
Ortiga

Reputation: 8824

You will have to chain them as callbacks

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

Upvotes: 0

Related Questions