setInterval script out of sync with innerFade

Question

I'm creating an ad banner for a client using innerFade plugin for jQuery and some basic Javascripting to move the background image in the CSS. I'm using the setInterval method for the background image but it is getting out of sync with innerFade. Below is the code I have placed in the head of the page. I'm just trying to find an effective and efficient method for syncing the two up.

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

Instead of all those ugly whiles, have you thought of using jQuery's `.animate()` method? It's hard to tell what's going on with your timing. — mVChr, Jan 16 '11 at 03:30

score 0 · Answer 1 · edited May 23 '17 at 09:58

0

I think the problem here is that Javascript is not multi-threaded. You are trying to emulate multi-threading by moving the image bit by bit, but the end result will never be perfectly in sync unless you write your own fade implementation.

Also you could replace while (secs < 6) { .. break; } with if (secs < 6).

edited May 23 '17 at 09:58

Community

1
1

answered Jan 12 '11 at 00:25

Egor Pavlikhin

17,503
16
61
99

Thank you for the response. Do you think changing the while loops to if statements will help with the synchronization? Otherwise, do you have any suggestions for getting them synced? Would writing a fade be as simple as changing the opacity of the divs? – Josh Jan 12 '11 at 16:10

setInterval script out of sync with innerFade

1 Answers1