DOM recursive animation problem.

[nameitself]

hello. I'm still really new to javascript so any help would be much appreciated. I'm trying to animate a 'tagline'
here's how it's supossed to work.

1. display the tagline A
2. user click a button
3. tagline A animates off the screen
4. tagline B animates onto the screen


Everything is working, but only if I put an alert right before the innerHTML switch.

here is the code that does the work

// Change Tag Functions
function changeTagLeft(){
var elem = document.getElementById('tagline');

right=0;
function moveLeft(){
elem.style.position = 'relative';
elem.style.right = right +"px";
right+=20;
if(right<300){ setTimeout(function () { moveLeft(); }, 1); }
}

function moveRight(){
elem.style.position = 'relative';
elem.style.right = right +"px";
right-=20;
if(right>=0){ setTimeout(function () { moveRight(); }, 1); }
}

moveLeft();

alert('blah');
tag_pos--;
if(tag_pos < 0){
tag_pos = taglines.length -1;
elem.innerHTML = taglines[tag_pos];
}else{
elem.innerHTML = taglines[tag_pos];
}

moveRight();

}


I would really appreciate any help. If i need to clarify anything just ask, Thank you.