Question

I am using the below to load a jQuery animated graph, however, there are some abnormalies with the fadeIn, it only works once, upon the second click on the btnPreviewGraph, the results do get displayed but without fading in and a significant delay. Can someone please advice, thanks.

$("#<%=btnPreviewGraph.ClientID%>").click(function () {
            var Manager = Sys.WebForms.PageRequestManager.getInstance();
            Manager.add_endRequest(function () {
                $(".extras_result").each(function () {
                    // get the width of the bar from the span html 
                    var length = $(this).find("span").html();
                    // Animate the width of the 'p' with a callback function 
                    $(this).find("p").animate({ 'width': length }, 700, function () {
                        // once the bar animation has finished, fade in the results 
                        $(this).find("span").fadeIn(800);
                    });
                });
            });
        });

 <asp:Button ID="btnPreviewGraph" runat="server" ClientIDMode="Static" 
                Text="Preview Qualified Statistics" CausesValidation="False"/>

             <asp:UpdatePanel ID="upnlPreviewChart" runat="server" UpdateMode="Conditional">
             <Triggers>
          <asp:AsyncPostBackTrigger ControlID="btnPreviewGraph" EventName="Click" />
             </Triggers>
          <ContentTemplate>
         <div class="row">
                    <asp:Label runat="server" ID="Label1" Text="No. of qualified members"
                        CssClass="label">
                    </asp:Label>
              <br /><br />
            <table cellpadding="0" cellspacing="0" class="extras_table" style="height: 120px">
  <tr>
    <th class="extras_y-desc" scope="row">Male</th>
    <td><div class="extras_result"><p class="extras_p">&nbsp;<span>350</span></p></div></td>
  </tr>
  <tr>
    <th class="extras_y-desc" scope="row">Female</th>
    <td><div class="extras_result"><p class="extras_p">&nbsp;<span>300</span></p></div></td>
  </tr>
  <tr>
    <th class="extras_y-desc" scope="row">Unknown</th>
    <td><div class="extras_result"><p class="extras_p">&nbsp;<span>500</span></p></div></td>
  </tr>
  <tr>
    <td></td>
    <td class="extras_x-desc">
    </td>
  </tr>
</table>
             </div>
         </ContentTemplate>
         </asp:UpdatePanel>

Answer 1

When you apply blue paint to a white wall, You can see the change. What, If you are painting blue over the existing blue wall. Your paint is being applied. But you can not notice. What you do then ? you Change the blue wall back to white again and then apply blue paint. Then you can see the change.

Same here. You already have the content visible. So just do a fadeOut then fadeIn

 $(this).find("span").fadeOut(900,function(){
    $(this).fadeIn(800);
  });