Простой слайдер с setInterval () со странным поведением

Question

Я пытаюсь сделать простой слайдер, используя setinterval и jquery.
Вы можете посмотреть здесь http://jsfiddle.net/5m2Dq/
Slider отлично работает, когда он находится в фокусе на браузере, но когда мы переходим на другую вкладку более 5 минут, все элементы div находятся друг под другом и начинают переключаться.

$('#fbLoginSlide div:gt(0)').hide();
setInterval(function(){
   $('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
   .next('div.loginSlide').fadeIn('slow')
   .end().appendTo('#fbLoginSlide');
},2000);

Есть ли простой способ добиться эффекта скольжения, подобного этому, без какого-либо плагина.

Answer 1

Это происходит, вероятно, потому что ваш браузер начинает пропускать тайм-ауты. Особенно, если вы просматриваете другую вкладку, браузер считает, что нет необходимости вызывать обратный вызов с точно 2-секундными интервалами. Вы должны полностью отказаться от функции setInterval! Вместо этого используйте обратный вызов завершения fadeOut и fadeIn, чтобы вызвать эффекты.

Попробуйте что-то вроде

var cycle = function() {
   $('#fbLoginSlide :eq(0)').fadeOut('slow').hide()
   .next('div.loginSlide').fadeIn('slow', function() { setTimeout(cycle, 1500); })
   .end().appendTo('#fbLoginSlide');
};
cycle();