Question

如何逐个延迟和淡化价值？

比如，点击--type_2--会显示：

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

并且每个值都淡入。

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];
        }
?>

Answer 1

嗯，理想情况下，您应该使用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";
        }

然后在test_1.php中更改您的HttPRequest.onreadystatechange = function()，如下所示：

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

如何逐一延迟和淡化价值？

1 个答案: