2

I have a function that runs on document load:

 function animateText() { $('.block') .css("background-image", "url(images/text-4-line-1.png)") .animate({left: "526"}, 1, "linear" ) .delay(2200).fadeIn(1000) .delay( 3000) .fadeOut(1000) $('.block2') .css("background-image", "url(images/text-4-line-2.png)") .animate({left: "484"}, 1).delay(3200).fadeIn(1000) .delay( 2500) //etc... }

I want to have a button that will stop this function from running and return all elements to original positions. I also want to have another button that will replay the animation function.

I can't get this to work.

Any help would be great!!

Thanks!

Improve this question
1
  • Welcome to SO, while you're here please don't forget to visit stackoverflow.com/faq Commented Jul 8, 2010 at 6:50

3 Answers 3

Reset to default
2

if your styling your dom elements not inline (e.g. style="color: red;"), this might do it...

$('#stop').click(function(){ $('.block,.block2').stop().removeAttr('style'); }); $('#play').click(function(){ $('.block,.block2').stop(true,true).removeAttr('style'); animateText(); });

note: don't do inline styling...

I made this fun demo

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

6 Comments

Thanks for your quick response, this works to send the animation back to the start, however all of the timing is lost. Im relying on .delay pretty heavily to get the timing right! Any other suggestions would be greatly appreciated. Thank you!!
I don't think it will affect the delay... can you explain the situation?... like when does the delay was lost...
Thanks for your help! I worked out my problem with your suggestion. YAY!!
just don't forget to accept the answer by clicking the check on the left of my answer :)
aha! find this line ('.block','.block2','#bg1','#bg2').stop(true,true).removeAttr('style'); you missed a $, you should have look at it at firebug debugger.. ;)
|
1 
.stop(true, true)

will stop the animations and clear the jQuery fx queue.

To "replay" your animaten, it should be just fine to call your animateText() function again.

$('#yourbutton').click(animateText);

Reference: .stop()

Improve this answer

3 Comments

.stop() alone won't return all elements to the original state, will it?? and I think .stop(true, true) will make the elements go to its final destination... :)
@Reigel: calling stop() with true on both parameters will indeed jump to the final state, which is probably what the OP wants. I didn't think its worth to mention that you have to reset an element before modifying it again, but maybe I'm wrong there.
hehe, I might just also confused on this statement from the OP, return all elements to original positions.
0

.stop will be helpful in your case.

Improve this answer

2 Comments

.stop() alone won't return all elements to the original state, will it??
@Reigel - Agree with you and jAndy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.