2

setintervalとjqueryを使用して単純なスライダーを作成しようとしています。http://jsfiddle.net/5m2Dq/
スライダーは、ブラウザーにフォーカスしている場合は正常に機能し ます が、別のタブに5分以上移動すると、すべてのdivが互いに重なり合い、切り替えを開始します。 

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

プラグインなしでこのようなスライド効果を実現する簡単な方法はありますか？

4

1 に答える 1

2

これはおそらく、ブラウザでタイムアウトが発生し始めたために発生します。特に別のタブを表示している場合、ブラウザーは正確に 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();
于 2011-10-31T06:33:42.647 に答える