CODEWITHSUNDEEP
jqueryasp.net
k80sg
k80sg

Reputation: 2473

JQuery fadein works only once

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>

Upvotes: 1

Views: 685

Answers (2)

Shyju
Shyju

Reputation: 218722

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

Upvotes: 4

Jon
Jon

Reputation: 113

jQuery fadeIn works by gradually changing style.opacity (or the equivalent in MSIE) from whatever it was at the time you called it on an object, until it = 1. It does not first bring this value to a startpoint of 0. You may want to call fadeOut on the click event for the update button, or at least in the callback when the updated data comes in.

Upvotes: 1

Related Questions