How to reset css before repeating sequence

Question

I am new to JS and JQuery - I used to program in basic in the 80's and although I have a sketchy understanding of variables and arrays, I admit I haven't got to grip with all the brackets in js. I know CSS and HTML well.

Through googling I have almost got what I want, which is for a line of text to move from R to L, fade and a new line to do the same thing. Perhaps have 4 of these text lines doing this and repeating infinitely.

For the sake of faster testing I have shortened the delays.

The one thing I can't get to happen is for the CSS left:400px to be reset before the animation begins all over again.

I don't know what to put or where to put it, but I have tried all of these, in many places!! I used hello World to show me where the code is activated, it didn't help.

//function reset(this){  $(this).removeAttr('style');}
//$(this).css('left', '500');
//$(elements).css('left', '500');
//removeAttr( 'style' );
//$("elements").removeAttr("style");
//$("#elements").removeAttr("style");
 //.text("Hello World");
//$("#Test1").text("Hello, world!");

I don't understand very much about JQuery yet, but I've seen most of the code I'm using on several question & answer websites including here and I copied some comments into the code to help me understand what's happening. I made my first jsfiddle to show the code. It begins immediately

http://jsfiddle.net/Stingraynut/Bf49z/3/

I hope someone here can help me reset the CSS back to left:400px after the 4 animations. Currently the first set of 4 work then the words all appear stuck left of screen, they don't go back to left:400px

Rob

Answer 1

A lot of jQuery functions have a callback function. The one that is particularly useful in this case is the callback of the .fadeOut() function. By changing the CSS in the callback function, you can move it back after the transition.

$self.fadeOut(200, function(){
     $(this).css("left", "400px");   
 });

JSFiddle