Question

我使用下面的方法来加载一个jQuery动画图形，但是，fadeIn有一些异常，它只能工作一次，在第二次点击btnPreviewGraph时，结果会显示但是没有淡入和显着延迟。有人可以请一下建议，谢谢。

$("#<%=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

当您将蓝色涂料涂在白墙上时，您可以看到更改。什么，如果你在现有的蓝色墙壁上画蓝色。你的油漆正在施工。但你不能注意到。那你做什么？您将蓝色墙壁再次更改为白色，然后涂上蓝色涂料。然后你可以看到变化。

同样在这里。您已经可以看到内容了。所以，只需fadeOut然后fadeIn

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

Answer 2

jQuery fadeIn的工作原理是逐渐改变style.opacity（或MSIE中的等价物），无论它在对象上调用它时是什么，直到它= 1.它不首先将此值带到0的起始点。您可能希望在更新按钮的click事件上调用fadeOut，或者至少在更新数据进入时的回调中调用fadeOut。

JQuery fadein只工作一次

2 个答案: