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

Question

在我的 wordpress 网站中，我正在使用聚集在一个栏中的社交按钮。

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

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

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

}

str 参数是帖子的 ID。 dd_outer 是浮动条的包装 div。当我调用负责通过 AJAX 动态加载帖子内容的函数时，我正在调用 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");
        }   

原始按钮：

 <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

我认为您可能需要在 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);


};

Answer 2

在您的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');
          });
}