Do not show social buttons (loaded via jquery) till they all are completely loaded

Question

In my wordpress site, I am using social buttons gathered in a bar.

These buttons are dynamically updated when the content is updated via jquery-ajax.

function update_social(str)
{
            $(".dd_outer").fadeOut("slow");     
            UpdateLikeButton(str);
        UpdateTweetButton(str);
        UpdatePlus1Button(str);

            $(".dd_outer").fadeIn('slow')

}

where the str parameter is the ID of the post. and dd_outer is the wrapper div of the floating bar. I am calling update_social when I call the function responsible of dynamically loading post contents via AJAX.

Everything works like a charm, but the problem is that, sometimes the bar fades in before the social buttons are completely loaded. How can I make the total bar do not appear till all buttons are loaded?

I thought FadeIn and FadeOut are enough. Appreciated is your help.

Edit:

function UpdateLikeButton(str)
        {
            var elem = $(document.createElement("fb:like"));
            elem.attr("href", "http://www.bag.com/Arabic/Arra2issia/"+str+"/");
            elem.attr("send", "false");
            elem.attr("layout", "box_count");
            elem.attr("show_faces", "false");
            $("#zzzz").empty().append(elem);
            FB.XFBML.parse($("#zzzz").get(0));
        }           

function UpdateTweetButton(str)
        {


            var elem3 = $(document.createElement("a"));
            elem3.attr("class", "twitter-share-button");
            elem3.attr("href","http://twitter.com/share");
            elem3.attr("data-url","http://www.bagh.com/"+str+"/");
            elem3.attr("data-counturl","http://www.bagh.com/"+str+"/");
            elem3.attr("data-count", "vertical");
            elem3.attr("data-via", "#");
            elem3.attr("data-text",str);
            elem3.attr("data-lang","en");
            $("#tweet").empty().append(elem3);

            $.getScript("http://platform.twitter.com/widgets.js",function(){
            twttr.widgets.load();


            });
        }   


 function UpdatePlus1Button(str)
        {
            var elem4 = $(document.createElement("g:plusone"));

            elem4.attr("href","http://www.bagh.com/"+str+"/");
            elem4.attr("size", "tall");

            $("#plus1").empty().append(elem4);

            $.getScript("https://apis.google.com/js/plusone.js");
        }   

Original buttons :

 <div id="zzzz" ><fb:like href="<?php the_permalink();?>" send="false" show_faces="false" layout="box_count"></fb:like></div>


<div id="plus1"><g:plusone size='tall' href='<?php the_permalink();?>'></g:plusone></div>

<div id="tweet"><a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink();?>" data-counturl="<?php the_permalink();?>" data-count="vertical" data-via="#" data-text="<?php the_ID();?>" data-lang="en"></a></div>

Answer 1

Add return in your functions like this :

function UpdateTweetButton(str)
        {
            var elem3 = $(document.createElement("a"));
            elem3.attr("class", "twitter-share-button");
            elem3.attr("href","http://twitter.com/share");
            elem3.attr("data-url","http://website/"+str+"/");
            elem3.attr("data-counturl","http://website/"+str+"/");
            elem3.attr("data-count", "vertical");
            elem3.attr("data-via", "#");
            elem3.attr("data-text",str);
            elem3.attr("data-lang","en");
            $("#tweet").empty().append(elem3);

     return $.getScript("http://platform.twitter.com/widgets.js",function(){
            twttr.widgets.load();
            });
        }   


 function UpdatePlus1Button(str)
        {
            var elem4 = $(document.createElement("g:plusone"));
            elem4.attr("href","http://website/"+str+"/");
            elem4.attr("size", "tall");
            $("#plus1").empty().append(elem4);
     return $.getScript("https://apis.google.com/js/plusone.js");
        }

Call them like this :

function update_social(str)
{
          $(".dd_outer").fadeOut("slow");     
            UpdateLikeButton(str);
          $.when(UpdateTweetButton(str), UpdatePlus1Button(str)).done(function(){
             $(".dd_outer").fadeIn('slow');
          });
}

Answer 2

I think you might need to call the code in a callback from the fadeOut function, so that it doesn't run until the bar has faded out... Try

function update_social(str)
{
  $(".dd_outer").fadeOut("slow");

   UpdateLikeButton(str);
   UpdateTweetButton(str);
   UpdatePlus1Button(str);

   //Make fadeIn wait 1 second before running to allow button functions to complete
   setTimeout(function(){
     $(".dd_outer").fadeIn('slow');
   },1000);


};