You could try something like this without the timers. It's a script I
wrote for a sidebar, but it handles the fade no matter which direction
you travel (was meant for an automated fade->to->next sidebar).
I will have to check the nth-child to see if it would fit my own
scenario if you feel it operates quicker.

/*
** Written by Steven K. Melendez.
** If any bugs are exhibited, please email:
** [EMAIL PROTECTED]
*/
var nHeadArray = new Array() //Headline of informative side article.
Size of nHeadArray must match nBodyArray
    nHeadArray[0] = "xxx";
    nHeadArray[1] = "xxx";

var nBodyArray = new Array() //Body of informative side article. Size
of nBodyArray must match nHeadArray
    nBodyArray[0] = "xxx";
    nBodyArray[1] = "xxx"

var q = nBodyArray.length
var x = 0

var prev = (q-1)
var next = (x+1)
var dTime = 15000 //Delay between array change in milliseconds
var fTime = 250 //Fade in/out time in milliseconds

var prevTime = setTimeout('nextFadeOut(' + next + ')', dTime)
var nextTime = setTimeout('nextFadeOut(' + next + ')', dTime)

$(document).ready(function(){  // Initial function after the page is
loaded and ready to go.
    document.getElementById('sb_cHead').innerHTML = nHeadArray[x]
    document.getElementById('sb_cBody').innerHTML = nBodyArray[x]

    document.getElementById('prev').href = "Javascript:previous(" +
prev + ")"
    document.getElementById('next').href = "Javascript:nextious(" +
next + ")"

    $('#sideBar_content').fadeIn(fTime);
});

function previous(mynum){
    clearTimeout(nextTime)
    clearTimeout(prevTime)

    document.getElementById('sb_cHead').innerHTML = nHeadArray[mynum];
    document.getElementById('sb_cBody').innerHTML = nBodyArray[mynum];

    $('#sideBar_content').fadeIn(fTime);

    if (mynum == 0){
        prev = (q-1)
        document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
    }
    else{
        prev = (mynum-1)
        document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
    }

    if (next == 0){
        next = (q-1)
        document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
    }
    else{
        next = (next-1)
        document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
    }

    prevTime = setTimeout('prevFadeOut(' + prev + ')', dTime)

}

function nextious(mynum){
    clearTimeout(nextTime)
    clearTimeout(prevTime)

    document.getElementById('sb_cHead').innerHTML = nHeadArray[mynum];
    document.getElementById('sb_cBody').innerHTML = nBodyArray[mynum];

    $('#sideBar_content').fadeIn(fTime);

    if (next == (q-1)){
        next = x
        document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
    }
    else{
        next++
        document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
    }

    if (mynum == 0){
        prev = (q-1)
        document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
    }
    else{
        prev = (mynum-1)
        document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
    }

    nextTime = setTimeout('nextFadeOut(' + next + ')', dTime)

}

function nextFadeOut(mynum){
    clearTimeout(nextTime)
    clearTimeout(prevTime)
    $('#sideBar_content').fadeOut(fTime);
    nextTime = setTimeout('nextious(' + mynum + ')', fTime)
}

function prevFadeOut(mynum){
    clearTimeout(nextTime)
    clearTimeout(prevTime)
    $('#sideBar_content').fadeOut(fTime);
    prevTime = setTimeout('previous(' + mynum + ')', fTime)
}

function pauseSideBar(){
    clearTimeout(nextTime)
    clearTimeout(prevTime)
}

Reply via email to