setInterval скрипт не синхронизирован с innerFade

Question

Я создаю рекламный баннер для клиента, используя плагин innerFade для jQuery и некоторые базовые Javascripting для перемещения фонового изображения в CSS. Я использую метод setInterval для фонового изображения, но он выходит из синхронизации с innerFade. Ниже приведен код, который я разместил в начале страницы. Я просто пытаюсь найти эффективный и эффективный метод синхронизации этих двух.

$(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).