In my wordpress site, I am using 3 social buttons gathered in a bar.These buttons are dynamically updated when the content is updated via jquery-ajax.\[code\]function update_social(str){ $(".dd_outer").fadeOut("slow"); UpdateLikeButton(str); UpdateTweetButton(str); UpdatePlus1Button(str); $(".dd_outer").fadeIn('slow')}\[/code\]where the \[code\]str\[/code\] parameter is the ID of the post. and \[code\]dd_outer\[/code\] is the wrapper div of the floating bar. I am calling \[code\]update_social\[/code\] 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 \[code\]FadeIn\[/code\] and \[code\]FadeOut\[/code\] are enough. Appreciated is your help.Edit:\[code\]function UpdateLikeButton(str) { var elem = $(document.createElement("fb:like")); elem.attr("href", "http://www.baghinsafer.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.baghinsafer.com/Arabic/Arra2issia/"+str+"/"); elem3.attr("data-counturl","http://www.baghinsafer.com/Arabic/Arra2issia/"+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
lusone")); elem4.attr("href","http://www.baghinsafer.com/Arabic/Arra2issia/"+str+"/"); elem4.attr("size", "tall"); $("#plus1").empty().append(elem4); $.getScript("https://apis.google.com/js/plusone.js"); } \[/code\]Original buttons :\[code\] <div id="zzzz" ><fb:like href="http://stackoverflow.com/questions/15733586/<?php the_permalink();?>" send="false" show_faces="false" layout="box_count"></fb:like></div><div id="plus1"><glusone size='tall' href='http://stackoverflow.com/questions/15733586/<?php the_permalink();?>'></glusone></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>\[/code\]
lusone")); elem4.attr("href","http://www.baghinsafer.com/Arabic/Arra2issia/"+str+"/"); elem4.attr("size", "tall"); $("#plus1").empty().append(elem4); $.getScript("https://apis.google.com/js/plusone.js"); } \[/code\]Original buttons :\[code\] <div id="zzzz" ><fb:like href="http://stackoverflow.com/questions/15733586/<?php the_permalink();?>" send="false" show_faces="false" layout="box_count"></fb:like></div><div id="plus1"><glusone size='tall' href='http://stackoverflow.com/questions/15733586/<?php the_permalink();?>'></glusone></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>\[/code\]