값을 하나씩 지연 및 페이드 아웃하는 방법은 무엇입니까?

값을 하나씩 지연 및 페이드 아웃하는 방법은 무엇입니까?값을 하나씩 지연 및 페이드 아웃하는 방법은 무엇입니까?

처럼, 클릭이 --type_2-- 때이 표시됩니다 :

10 --delay-- 11 --delay-- 12 --delay-- 13 --delay-- 14 - delay-- 15 --delay-- 16 --delay-- --delay-- 18 --delay-- 19

17의 모든 값은 페이드 인

test_1.php :.

<html> 
<head> 
<script language="JavaScript"> 
     var HttPRequest = false; 

     function doCallAjax(ID) { 
      HttPRequest = false; 
      if (window.XMLHttpRequest) { // Mozilla, Safari,... 
      HttPRequest = new XMLHttpRequest(); 
      if (HttPRequest.overrideMimeType) { 
       HttPRequest.overrideMimeType('text/html'); 
      } 
      } else if (window.ActiveXObject) { // IE 
      try { 
       HttPRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
       try { 
        HttPRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e) {} 
      } 
      } 

      if (!HttPRequest) { 
      alert('Cannot create XMLHTTP instance'); 
      return false; 
      } 

      var url = 'test2.php'; 
      var pmeters = "tID="+ID; 

      HttPRequest.open('POST',url,true); 

      HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      HttPRequest.setRequestHeader("Content-length", pmeters.length); 
      HttPRequest.setRequestHeader("Connection", "close"); 
      HttPRequest.send(pmeters); 


      HttPRequest.onreadystatechange = function() 
      { 

       if(HttPRequest.readyState == 3) // Loading Request 
        { 
        document.getElementById("mySpan").innerHTML = "Now is Loading..."; 
        } 

       if(HttPRequest.readyState == 4) // Return Request 
        {   
         document.getElementById('mySpan').innerHTML = HttPRequest.responseText; 
        }    
      } 

     } 
    </script> 
</head> 
<body Onload="JavaScript:doCallAjax('type_1');"> 
<h1>My Content</h1> 
<table width="577" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="104" valign="top"> 




    <a href="JavaScript:doCallAjax('type_1');">type_1</a><br> 

    <a href="JavaScript:doCallAjax('type_2');">type_2</a><br> 


    </td> 
    <td width="540" valign="top"><span id="mySpan"></span></td> 
    </tr> 
</table> 

</body> 
</html>

test_2.php :

<?PHP 
    $strID = $_POST["tID"]; 

    if ($strID == "type_1") 
     { 

      for($i=0;$i<10;$i++) 
       { 
        $show[$i] = $i; 
       } 

     } 
    else 
     { 
      for($i=0;$i<10;$i++) 
       { 
        $show[$i] = $i+10; 
       } 
     } 
?> 


<?PHP 
    for($i=0;$i<10;$i++) 
     { 
      echo $show[$i]; 
     } 
?>

출처

2013-12-16 user3108009

실제로 jQuery를 사용하지 않습니다. 이를 사용하면 JS 코드의 90 %가 제거됩니다. – SLaks

하지만 왜 태그를 jQuery로 태그합니까 ??? 당신은 분명히 그것을 포함하지 않습니다! 빠른 응답을 얻으려면 Jquery는 마법 태그가 아닙니다. –

미안 .... 지연 및 페이드 인으로 생각합니다. jQuery를 사용해야합니다. ^^ – user3108009

글쎄, 이상적으로, 당신은 그러나 당신이 이미 가지고있는 것을 사용하여, jQuery를 사용하여 스크립트를 다시 작성해야합니다, 당신은이 작업을 수행 할 수 있습니다.

먼저 <head>에 jquery 라이브러리를 포함하십시오.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

그런 다음에 test_2.php 파일 변경 :

for($i=0;$i<10;$i++) 
     { 
      echo $show[$i]; 
     }

에 다음과 같이 당신의 그런

for($i=0;$i<10;$i++) 
     { 
      echo "<div>$show[$i]</div>\n"; 
     }

당신의 HttPRequest.onreadystatechange = function()을 변경 test_1.php :

HttPRequest.onreadystatechange = function() { 

    if(HttPRequest.readyState == 3) // Loading Request 
     { 
     document.getElementById("mySpan").innerHTML = "<div>Now is Loading...</div>"; 
     } 

    if(HttPRequest.readyState == 4) // Return Request 
     {   
      document.getElementById('mySpan').innerHTML = HttPRequest.responseText; 

      $('#mySpan div').hide(); 

      $('#mySpan div').each(function(index){ 
      $(this).delay(1000*index).fadeIn(1000); 
      }); 
     }    
}

출처

2013-12-16 16:50:41 MElliott

사용자가 2 초 이상로드하면 이미지 [link] (http://www.exim.go.th/img/icon/loading.gif)로드를 표시하고 싶습니다. 어떻게해야합니까? – user3108009

아마도 도움이 될 것입니다 - http://stackoverflow.com/questions/9074477/jquery-show-loading-image-only-if-ajax-call-takes-more-than-one-second – MElliott

값을 하나씩 지연 및 페이드 아웃하는 방법은 무엇입니까?

답변

관련 문제