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