在完全加载之前，不要显示社交按钮（通过jquery加载）

在我的wordpress网站中，我使用的是收集在酒吧中的社交按钮。

当通过jquery-ajax更新内容时，这些按钮会动态更新。

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

其中str参数是post的ID。 和dd_outer是浮动条的包装div。 当我调用负责通过AJAX动态加载post内容的函数时，我正在调用update_social 。

一切都像魅力一样，但问题是，有时候，在完全加载社交按钮之前，条形会消失。 在装入所有按钮之前，如何才能使总条显示？

我认为FadeIn和FadeOut就足够了。 感谢您的帮助。

编辑：

 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"); } 

原始按钮：

  
<fb:like href="" send="false" show_faces="false" layout="box_count">
 
<g:plusone size='tall' href=''>
 
<a href="http://twitter.com/share" class="twitter-share-button" data-url="" data-counturl="" data-count="vertical" data-via="#" data-text="" data-lang="en"> 

Answer 1

在您的functions添加return ，如下所示：

 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"); } 

像这样打电话给他们：

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

Answer 2

我想你可能需要在fadeOut函数的回调中调用代码，这样它才会在条形淡出之前运行…试试

 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); };