Есть много способов достичь этого. Что-то с вашими селекторами не правильно, и IMO вы делаете это слишком сложно и трудно для понимания. Вот рабочий код:
$(function () {
var $children = $("#tableslide").children();
var step = 10, total = $children.length, currentStart = 0;
// hide all
$children.hide();
// buffer to know what was shown, you could also go with :visible
var $lastVisibleItems = $children.slice(currentStart, currentStart + step).show();
setInterval(function () {
$lastVisibleItems.fadeOut().promise().then(function () {
currentStart += step;
$lastVisibleItems = $children.slice(currentStart, currentStart + step).fadeIn();
if (currentStart + step >= $children.length) {
// reset to beginning, actually -step because it will because 0 after +step
currentStart = -step;
}
});
}, 3000);
});
Рабочая скрипка
Объяснение:
- Первый буфер для всех детей элементы
- Настройка вашего шага, т.е. видимых элементов сразу.
- Настройка текущего запуска, т. е. в любой момент элементы [currentStart, currentStary + step) видимый. Вы используете
slice, чтобы получить дочерний массив - В интервальном вызове просто скрыть последние видимые элементы (они уже есть в переменной буфера, нет необходимости проходить через DOM). Увеличьте текущее начало с шагом, покажите новые элементы и снова запишите их в буфер.
- Если ваш конечный индекс (текущий старт + шаг) равен или больше всех детей, то сбросьте на ноль (или очистите интервал, если вы хотите остановить анимацию)
ОБНОВЛЕНИЕ:
Поскольку вопрос теперь включает динамическое c заполнение таблицы с помощью ajax вот новый код:
$(function () {
var interval;
var $table = $("#tableslide"), $children = $table.children();
var step = 10, total = $children.length, currentStart = 0;
function startInterval() {
return setInterval(function () {
currentStart += step;
if (currentStart + step > $children.length) {
// you have reached the end and you will not render a whole page so clear here
clearInterval(interval);
interval = null;
} else {
$lastVisibleItems.fadeOut().promise().then(function () {
$lastVisibleItems = $children.slice(currentStart, currentStart + step).fadeIn();
});
}
}, 3000);
}
function restoreInterval() {
if (!interval) {
// you have stopped your timer, hence start it again, without changing the currentStart
interval = startInterval();
} else {
// do nothing
}
}
// hide all
$children.hide();
// buffer to know what was shown, you could also go with :visible
var $lastVisibleItems = $children.slice(currentStart, currentStart + step).show();
interval = startInterval();
$.ajax({
url: '/testurl',
type: 'POST',
//complete: function(result) { //use for testing
success: function(result) {
// modify your DOM with the server response. in my case add 10 dummy rows
for (var i = 1; i <= 10; i++) {
$table.append($("<tr><td>Ajax row " + i + "</td><td>" + i + "</td></tr>").hide());
}
// add rows to table and do not forget to modify the varuiable $children
$children = $("#tableslide").children();
// Restore the interval
restoreInterval();
}
})
});
PS Теперь это немного более сложный код, и я думаю, что вы будете более сбиты с толку, но я надеюсь, что это будет полезно. Замените success на complete, чтобы вы могли проверить его. Независимо от того, сколько ajax вызовов вы сделаете, он будет работать, вы даже можете сделать ajax вызовов из функции интервала, если обнаружите, что вы на 1 или 2 страницы ближе к концу.