setIntervalスクリプトがinnerFadeと同期しない

Question

jQuery用のinnerFadeプラグインとCSSの背景イメージを移動するための基本的なJavascriptを使用して、クライアント用の広告バナーを作成しています。背景画像にsetIntervalメソッドを使用していますが、innerFadeとの同期が外れています。以下は、私がページの先頭に置いたコードです。私はちょうど2つを同期させるための効果的で効率的な方法を見つけることを試みている。

$(document).ready(function() { 
    $('#slides').innerfade({ 
     animationtype: 'fade', 
     speed: 2000, 
     timeout: 5000, 
     type: 'sequence', 
     containerheight: '326px' 
    }); 
}); 

---

// Code for panning of background images 
var scrollSpeed = 48.58; 
var step = 1; 
var interval = 0; 
var secs = 0; 
var img1Pos = 0; 
var img2Pos = 0; 
var img3Pos = 0; 

function scrollBg() { 
    interval += step; 
    secs = (interval/20); 

    while (secs < 1) { 
     $(this).hide("slide", { 
      direction: "down" 
     }, 1000); 
     img3Pos -= step; 
     $('#image3').css("background-position", "0 " + img3Pos + "px"); 
     break; 
    } 
    while (secs < 6) { 
     img1Pos -= step; 
     $('#image1').css("background-position", "0 " + img1Pos + "px"); 
     break; 
    } 
    while (secs < 11 && secs > 5) { 
     img2Pos -= step; 
     $('#image2').css("background-position", img2Pos + "px 0"); 
     break; 
    } 
    while (secs < 15 && secs > 10) { 
     img3Pos -= step; 
     $('#image3').css("background-position", "0 " + img3Pos + "px"); 
     break; 
    } 
    if (secs == 15) { 
     interval = 0; 
     img1Pos = 0; 
     img2Pos = 0; 
    } 
    if (secs == 1) { 
     img3Pos = 0; 
    } 
} 

var init = setInterval("scrollBg()", scrollSpeed); 

Answer 1

私はこの問題は、ここにJavascriptをis not multi-threadedということだと思います。ビット単位でイメージを移動してマルチスレッドをエミュレートしようとしていますが、独自のfade実装を記述しない限り、最終結果は完全に同期することはありません。

while (secs < 6) { .. break; }をif (secs < 6)に置き換えることもできます。