how to make table rows slide fade in/fade out continuously

Question

I have a table with 6 rows (or data), I want first load show 2 rows data then fade out and showing next rows 2 rows again and fade out again then show next rows 2 rows again continuously every (n) seconds

here is the code of table

<table border>
<thead>
    <tr>
        <th>naslov1</th>
        <th>naslov2</th>
        <th>naslov3</th>
    </tr>
</thead>
<tbody id="tableslide">
    <tr>
        <td>test_@0</td>
        <td>test_@0</td>
        <td>test_@0</td>
    </tr>
    <tr>
        <td>test_@1</td>
        <td>test_@1</td>
        <td>test_@1</td>
    </tr>
    <tr>
        <td>test_@2</td>
        <td>test_@2</td>
        <td>test_@2</td>
    </tr>
    <tr>
        <td>test_@3</td>
        <td>test_@3</td>
        <td>test_@3</td>
    </tr>
    <tr>
        <td>test_@4</td>
        <td>test_@4</td>
        <td>test_@4</td>
    </tr>
    <tr>
        <td>test_@5</td>
        <td>test_@5</td>
        <td>test_@5</td>
    </tr></tbody>

I was tried on this fiddle http://jsfiddle.net/gtd4f5ny/28/ but its just slide 2 times and I want make it 3 times every 2 rows every (n) seconds. Please help guys. Thanks

Answer 1

Check this out:

$(function () {
	var $tableslide = $("#tableslide");
  var rows = $("#tableslide").children().length;
  var iterCount = 0;
  var lastPairSel = null;
  $("#tableslide").children().hide();

	setInterval(function () {
  	var start = iterCount*2 % rows;
    var next = (iterCount*2 + 1) % rows;
    var startSel = 'tr:nth-child(' + (start+1) + ')';
    var nextSel = 'tr:nth-child(' + (next+1) + ')';
    var pairSel = startSel + ',' + nextSel;
    console.log(pairSel);
    

$tableslide.children( lastPairSel ).fadeOut().promise().then(function () {
			$tableslide.children( pairSel ).fadeIn();
          lastPairSel = pairSel;

		});
  	
    iterCount++;
    
    
	}, 3000);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
    <thead>
        <tr>
            <th>naslov1</th>
            <th>naslov2</th>
            <th>naslov3</th>
        </tr>
    </thead>
    <tbody id="tableslide">
        <tr>
            <td>test_@0</td>
            <td>test_@0</td>
            <td>test_@0</td>
        </tr>
        <tr>
            <td>test_@1</td>
            <td>test_@1</td>
            <td>test_@1</td>
        </tr>
        <tr>
            <td>test_@2</td>
            <td>test_@2</td>
            <td>test_@2</td>
        </tr>
        <tr>
            <td>test_@3</td>
            <td>test_@3</td>
            <td>test_@3</td>
        </tr>
        <tr>
            <td>test_@4</td>
            <td>test_@4</td>
            <td>test_@4</td>
        </tr>
        <tr>
            <td>test_@5</td>
            <td>test_@5</td>
            <td>test_@5</td>
        </tr>
        <tr>
            <td>test_@6</td>
            <td>test_@6</td>
            <td>test_@6</td>
        </tr>
        </tbody>
</table>

Edit:

Changing this fixes the [0,6] problem:

var start = iterCount*2 % rows;
var next = start+1; //If next is unavailable index, it will be ignored

If "n at a time" is dynamic:

    $(function () {
        var $tableslide = $("#tableslide");
        var rows = $("#tableslide").children().length;
        var start = 0;
        var lastPairSel = null;
        $("#tableslide").children().hide();

        setInterval(function () {
            var n = 4;
            var pairSel = '';
            for(var i=0; i<n; i++){
                if(start+i > rows) break; //Optional. To skip unwanted selectors
                if(i>0) pairSel+=',';
                pairSel += 'tr:nth-child(' + (start+i+1) + ')'
            }
            console.log(pairSel);

            $tableslide.children( lastPairSel ).fadeOut().promise().then(function () {
                $tableslide.children( pairSel ).fadeIn();
                lastPairSel = pairSel;
            });

            start = (start + n);
            if(start>rows) start = 0;
        }, 3000);  
    });