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

在return中添加functions，如下所示：

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

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

2 个答案: