JQueryでsetInterval（）を使用して画像がちらつくのを防ぐにはどうすればよいですか？

Question

のjQuery：

var count = 3; 

setInterval(function() { 
    if (count == 12) { 
     count = 3; 
    } 

    count++; 
    $('.desktop').css({'background-image': 'url(images/index_main_bg'+count+'.jpg)'}); 
}, 3000); 

CSS：

.desktop { 
    background: url(images/index_main_bg4.jpg) center no-repeat; 
    background-size: cover; 
    z-index: 9; 
    transition: background 1.1s linear; 
} 

は基本的に、私はこれらの背景画像がスムーズな移行を持っているしたいが、それは一見ランダムなタイミングで遅れちらつきを持っています。どんな助けもありがとう！

おかげ

Answer 1

すべての画像を含む大きな画像を使用して、バックグラウンドの位置（スプライト画像）を変更

var count = 1,varx_pos = 0; 
 
setInterval(function(){ 
 
varx_pos += 180; 
 
if(count == 3){varx_pos = 0;count=0;} 
 
    $('.desktop').css({'background-position-x':varx_pos+'px'}); 
 
count++; 
 
},150);

.desktop{ 
 
background-image:url('http://spritely.net/images/bird_180x180.png'); 
 
width:180px; 
 
height:120px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="desktop"></div>

Answer 2

は、複数の 'の.desktop' 要素を作成し、別の割り当てすべての人のための背景。特定の.desktop要素を表示したり非表示にすることができます。あなたはこの解決策ではちらつきが見えません。

Answer 3

これは私がやってしまったものです：

のjQuery：

var count=3; 

setInterval(function() { 
    if(count==11){ 
     $('#desktop').removeClass('desktop'+(count+1)); 
     count=3; 
     $('#desktop').addClass('desktop'+(count+1)); 
    } else { 
     count++; 
     $('#desktop').removeClass('desktop'+count); 
     $('#desktop').addClass('desktop'+(count+1)); 
    } 
}, 3000); 

CSS（私は追加および削除された複数のクラスを作成）：

.desktop4 { 
    background-image: url(images/index_main_bg4.jpg); 
} 

.desktop5 { 
    background-image: url(images/index_main_bg5.jpg); 
} 

.desktop6 { 
    background-image: url(images/index_main_bg6.jpg); 
} 

はHTML：

<div id="desktop" class="desktop4"> 
    SOME CONTENT 
<div> 

このav前と同じように特定のクラスのスタイルを変更する代わりに、ちらつきが目立たなくなりました。