JQuery - how do I exit user defined function?

Question

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!

Welcome to SO, while you're here please don't forget to visit stackoverflow.com/faq — Reigel Gallarde
– Reigel Gallarde, Commented Jul 8, 2010 at 6:50

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 8, 2010 at 6:54

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

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

6 Comments

Melzee Over a year ago

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!!

Reigel Gallarde Over a year ago

I don't think it will affect the delay... can you explain the situation?... like when does the delay was lost...

Melzee Over a year ago

Thanks for your help! I worked out my problem with your suggestion. YAY!!

Reigel Gallarde Over a year ago

just don't forget to accept the answer by clicking the check on the left of my answer :)

Reigel Gallarde Over a year ago

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.. ;)

|

jAndy · Accepted Answer · 2010-07-08 06:51:52Z

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

answered Jul 8, 2010 at 6:51

jAndy

237k57 gold badges313 silver badges363 bronze badges

3 Comments

Reigel Gallarde Over a year ago

.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... :)

jAndy Over a year ago

@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.

Reigel Gallarde Over a year ago

hehe, I might just also confused on this statement from the OP, return all elements to original positions.

Krunal · Accepted Answer · 2010-07-08 06:53:00Z

0

.stop will be helpful in your case.

answered Jul 8, 2010 at 6:53

Krunal

3,5513 gold badges26 silver badges27 bronze badges

2 Comments

Reigel Gallarde Over a year ago

.stop() alone won't return all elements to the original state, will it??

Krunal Over a year ago

@Reigel - Agree with you and jAndy.

Collectives™ on Stack Overflow

JQuery - how do I exit user defined function?

3 Answers 3

I made this fun demo

6 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related