Question

我需要使用ajax请求后收到的数据淡化元素。它工作正常，但所有元素同时变得可见。是否有可能在每个要显示的元素的可见性变化之间实现小的延迟？

  $.ajax({        
               type: "POST",
               url: "get_values.php",
               dataType: "json",
               data: { prm_listArray : prm_list},
               success: function(res) { 
                    $.each(res, function(key, value) {
                       var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
                       $(cell).find(".cell_text").html(value.prm_value).fadeIn('slow');
                       })
                 }
            });

我试图插入延迟（3000）但没有成功：

$(cell).find(".cell_text").html(value.prm_value).delay(3000).fadeIn('slow');

并以相同的行为超时：

$(cell).find(".cell_text").html(value.prm_value);
                setTimeout(function() {
                    $(cell).find(".cell_text").fadeIn('slow');
                }, 3000);

Answer 1

变量cell每次都会在for循环中被覆盖。所以它应该定义为范围变量。

$.each(res, function(key, value) {
  var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
  (function(cell) {
    setTimeout(function() {
        $(cell).find(".cell_text").fadeIn('slow');
    }, 3000);
  })(cell);
});

增加测试代码：

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    var res = [
        { prm_row: 0, prm_column: 0 },
        { prm_row: 1, prm_column: 1 },
        { prm_row: 2, prm_column: 2 },
    ];
    $.each(res, function(key, value) {
        var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
        (function(cell) {
            setTimeout(function() {
                $(cell).find(".cell_text").fadeIn('slow');
            }, 3000);
        })(cell);
    });
})
</script>
<style type="text/css">
#board .cell_text {
    display: none;
}
</style>
</head>
<body>
<table id="board">
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
</table>    
</body>
</html>

逐步

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    var res = [
        { prm_row: 0, prm_column: 0 },
        { prm_row: 1, prm_column: 1 },
        { prm_row: 2, prm_column: 2 },
    ];

    var f = function() {
        var value = res.shift();
        if (!value) return;
        var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
        $(cell).find(".cell_text").fadeIn('slow');
        setTimeout(function() {
            f(res);
        }, 3000);
    };
    setTimeout(f, 3000);
})
</script>
<style type="text/css">
#board .cell_text {
    display: none;
}
</style>
</head>
<body>
<table id="board">
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
</table>    
</body>
</html>

使用setInterval：

    var timer = setInterval(function() {
        var value = res.shift();
        if (!value) {
            clearInterval(timer);
            return;
        }
        var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
        $(cell).find(".cell_text").fadeIn('slow');
    }, 3000);

一步一步jquery元素fadeIn

1 个答案: