JQuery fadein은 한 번만 작동합니다.

아래에 jQuery 애니메이션 그래프를로드하는 데 fadeIn에 몇 가지 비정상적인 현상이 있습니다. btnPreviewGraph의 두 번째 클릭시 한 번만 작동하지만 결과는 표시되지만 표시되지는 않습니다. 페이드 인 및 상당한 지연. 누군가 조언 해 주실 수 있습니까?JQuery fadein은 한 번만 작동합니다.

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

출처

2012-03-06 k80sg

흰 벽에 파란색 페인트를 칠하면 변경 사항을 볼 수 있습니다. 뭐, 만약 당신이 기존의 푸른 벽 위에 푸른 색으로 칠하고 있다면. 당신의 페인트가 적용되고 있습니다. 하지만 눈치 채실 수는 없습니다. 그때 당신은 무엇을합니까? 파란색 벽을 다시 흰색으로 변경 한 다음 파란색 페인트를 적용합니다. 그러면 그 변화를 볼 수 있습니다.

여기와 같습니다. 이미 콘텐츠를 볼 수 있습니다. 이 1. =까지 그러니 그냥하는 fadeOut 다음 fadeIn

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

출처

2012-03-06 02:09:02 Shyju

코드 예에서는 하나 더합니다. –

jQuery를 fadeIn 점차적으로 당신이 객체에 호출 한 당시 어떤에서 style.opacity (또는 MSIE에 해당)을 변경하여 작동 할 그것은 먼저이 값을 시작점 0으로 가져 오지 않습니다. 업데이트 버튼에 대한 click 이벤트에서 fadeOut을 호출하거나 업데이트 된 데이터가 들어올 때 적어도 콜백에서 fadeOut을 호출 할 수 있습니다.

출처

2012-03-06 02:16:49 Jon

fadeOut이 필요한 이유를 설명하는 데 하나 더하기. –

JQuery fadein은 한 번만 작동합니다.

답변

관련 문제