step by step jquery elements fadeIn

Question

I need to fadeIn elements with data received after ajax request. It works ok, but all of elements becomes visible at same time. Is it possible to implement small delay between visibility changes for each element to be showed?

  $.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');
                       })
                 }
            });

i tried to insert delay(3000) without success:

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

And timeout with the same behavior:

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

mattn · Answer 1 · 2012-11-29T11:50:26.783

Variable cell is overwriting in the for-loop each time. So it should define as scoped-variable.

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

ADDED TEST CODE:

<!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>

STEP BY STEP

<!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>

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

"(funciton(cell) {" should be changed to "(function(cell) {" — slowe, Nov 29 '12 at 11:04
mattn, thanks for reply. i tried your variant but elements do not appear. maybe i missed something — user947668, Nov 29 '12 at 11:24
mattn, forgot to fill cell span with data. now elements appear with delay but again all at the same time. — user947668, Nov 29 '12 at 11:44
checked your ADDED code - same behavior. appearance at the same time — user947668, Nov 29 '12 at 11:47
If you don't want multiple setTimeout, you can use setInterval instead. — mattn, Nov 29 '12 at 11:53
tried variant with setTimeout - same behavior :(. no delay between elements appearance. — user947668, Nov 29 '12 at 12:10
yep. when i execute your code - everything looks good, but when i insert your js part into my {success: $.each} function i see no delay between appearances. maybe there is something special with ajax:success? — user947668, Nov 29 '12 at 12:25
found solution here: http://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another delay with index multiplying — user947668, Nov 29 '12 at 13:04

step by step jquery elements fadeIn

1 Answers1