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

Liftoff · Accepted Answer · 2014-03-09 06:59:00Z

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

answered Mar 9, 2014 at 6:59

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

codingbbq Over a year ago

I just reset all the divs to left 400px everytime the function is called. Not sure if that is the right way to do it. jsfiddle.net/Bf49z/5

Liftoff Over a year ago

Okay, but it's not fading out anymore. Did you take a look at my fiddle? It does exactly what you asked it to do. The problem with what you are doing is that you are moving it before it fades out. You are moving all of the elements over every time the function is called. If you put the movement in the callback (like in my answer), it will fade out first and then move.

Stingraynut Over a year ago

Thanks very much David, I have a lot to learn. Someone called noobcode also answered, and it looks like you thought he was me, which he wasn't ! When the text first appears, it hangs in the first position for a moment, I would prefer it to be moving as it fades in. Is that the 'easing' function? and how would I add it, or if not, how can I have the text moving as it fades in? I have changed the js fiddle to make the times longer, so the effect is more obvious. Eventually I want it to stop on the left for 3 seconds before fading. jsfiddle.net/Stingraynut/Bf49z/8

Stingraynut Over a year ago

David, YES!! That is exactly what I was aiming for, thank you very much.The link to an explanation of Callback is a site I have read, but it makes more sense having made a mistake and seeing how to do it. I put my script and yours side by side, to see what you’ve done, because it’s mostly a complete rewrite. Thanks for the comments beside each line, it really helps I notice also that the CSS ‘display’ is now ‘inline-block’ and ‘opacity:0; ‘ is added. No room for questions, so have started a new thread stackoverflow.com/questions/22291054/…

Collectives™ on Stack Overflow

How to reset css before repeating sequence

1 Answer 1

JSFiddle

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related