0

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); 
1
  • 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, 2011 at 3:30

1 Answer 1

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

1
  • 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, 2011 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.