CODEWITHSUNDEEP
jquerymethodsreset
Mare
Mare

Reputation: 81

how to reset a jquery animation to start over?

I have built a nice piece of code, some animation and some click/hover events, quite a small row of them. I intend to use it on multiple html-documents (it is a game, you have to get right answer and proceed with next question), built together in another html with full-page-slider (I don't want to load DOM multiple times, makes no sense): the unsolved question is: how to reset the code without actually reloading it? how to make it to clear everything so far and start over? I am a beginner, building stuff upon others snippets. I guess it must be something so easy and basic that nobody answered it... The stuff to animate back all what is done previously is no good: too much stuff and binding and unbinding.

Upvotes: 8

Views: 23425

Answers (7)

Louis55
Louis55

Reputation: 408

Try .finish().
Example (try spamming the button):

$('button').on('click', function(event) {
  $("div").finish();
  $("div").fadeOut(1000);
});

Upvotes: 0

nsordk
nsordk

Reputation: 59

For jQuery you can use .finish(), and before that, to reset you need a few parameters to the .stop() method.

$(element).stop(true, true);

https://api.jquery.com/stop/

Upvotes: 4

bdurao
bdurao

Reputation: 555

I do it this way: (not sure if it's entirely right, though)

$(element).stop();
$(element).clearQueue();
$(element).delay(20).animate({ ... });

Upvotes: 1

Brett
Brett

Reputation: 558

I had an animation that was keeping the position each time the code ran. To fix it I used:

function(){ $('.target').removeAttr('style'); }

so my code was something like:

$('#target').animate({
  opacity: 'toggle',
  top: '+=100',
  }, 1000, function() {
  $('#target').removeAttr('style'); 
});

Upvotes: 22

Mare
Mare

Reputation: 81

Thank you for patient answers. Both are right:

  • in case of one animation the stop method works.

  • in case of multiple chained animations - sorry, there is no easy way. Reload if you want a short but not so elegant solution. To do it properly - learn javascript to build the logical chain of functions. You can't run long with just jQuery.

Upvotes: 0

jimmystormig
jimmystormig

Reputation: 10782

There is no easy answer since it all depends on what you've done, what state you need to reset, what UI elements need to be reset and so on. I guess you have to build your own reset method that sets all things to their initial state or... you could take the easy path and just reload the page.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

$(element).stop(), then re-run your animation.

Upvotes: 0

Related Questions