Start jquery animation again after it completes

Question

I am new to JQuery and currently not in a position to solve this issue. I have created a small piece of animation on clicking a link. However, the animation won't replay, when I click the link again. I need to refresh the page in-order to make it work.

Here is the full code.. I am trying to make a series of animation when someone clicks.

Here is the updated code

$(document).ready(function(){
   $("#start").one('click',function(){
      $("#mailer").animate({left:'300px',top:'55px'}, 2000);
      $("#ms-server1").delay(2000).fadeIn();
      $("#mail").delay(2000).animate({left:'800px',top:'200px'}, 2000);
      $("#mail1").delay(2000).animate({left:'550px',top:'240px'}, 2000);
      $("#man-opn").delay(6000).fadeIn();
      $("#woman-opn").delay(4000).fadeIn();
      $("#opnstat1").delay(6500).fadeIn();
      $("#opnstat2").delay(4500).fadeIn();
      $("#lnk").delay(8500).fadeIn();
      $("#click-info").delay(9000).animate({left:'300px',top:'60px'}, 5000);
      $("#clickstat1").delay(11500).fadeIn(function(){
         $("#ms-server1").hide();
      });
   });
});

I would like to have the entire animation/function to be replayed, when someone clicks the link id #start again..

Sorry for the previous unfinished code Any help is much appreciated.. thanks again

http://jsfiddle.net/gopakumar/tgz5y/1/

`one` is specifically to use when you want the handler to be unbounded once the action was triggered. — Denys Séguret, Mar 03 '13 at 12:59
Did you want it to start from the same position everytime? or go top 300px, 600px, 900px etc for each call? — Peter Rasmussen, Mar 03 '13 at 13:07

score 1 · Answer 1 · answered Mar 03 '13 at 13:14

1

This can easily be done using recursion.

$(document).ready (function() {
  $('#link1').one('click',function() {
    function goAgain() {
      $('#image1').animate({left:'200px', top:'300px'}, 2000);
      goAgain();
    }
  });
});

answered Mar 03 '13 at 13:14

Gunther

2,474
4
31
45

Am sorry this is not working for me. I have just updated the query with the full code.. Thank you – Gops Mar 03 '13 at 14:01

score 1 · Answer 2 · answered Mar 03 '13 at 14:51

You have to reset the position of the divs everytime you want to execute this animation. I have added this to your JSFiddle:

Working demo

$(document).ready(function(){
    var start= $("#start");
    $("#start").click(function(){

        if (!start.hasClass('started')){
            start.addClass('started');
            $('#mailer,#mail,#mail1').css({"left":"9px","top":"52px","display":"none"});
            $("#mailer").css('display','block').animate({left:'300px',top:'55px'}, 2000);
            $("#ms-server1").delay(2000).fadeIn();
            $("#mail").css('display','block').delay(2000).animate({left:'300px',top:'200px'}, 2000);
            $("#mail1").css('display','block').delay(2000).animate({left:'350px',top:'240px'}, 2000,
            function(){
                start.removeClass('started');
            });
        }
   });
});

I removed the last few animations (they are still in the fiddle just not here on SO), as they were taking up a lot of space - and did not contribute to the solution.

Your solution seems almost fit. However since there is a series of animation, is there any way the entire function has to be recalled and load again, upon click. So this way I can start the animation, when someone clicks on the start- link. Am deeply sorry, for taking your time to solve this. — Gops, Mar 03 '13 at 17:53

score 0 · Answer 3 · answered Mar 03 '13 at 13:02

0

In your case, .one() is causing your problem, you just need to make it .on() and you will have animation performed ones per every click.

If you want the continuous animation :

There are two nice solutions to this infinite animation :

1 - use set interval in javascript:

setInterval(function,millisec)

you just set it to repeat every time it finishes, so miliseconds in your case is 2000 and function is your jquery animate.

2 - use css3 animation:

I got Article here http://metaphorical-lab.com/blog/?p=302 and example is floating around left sidebar on the top :D

answered Mar 03 '13 at 13:02

Rastko

477
2
7

I just changed to .on and the animation is not working.. Where have i gone wrong?. When i switched back to .one it's working again – Gops Mar 03 '13 at 14:03
just do $(linkselector).click(function()... It should do. If it does not check the debugging consol. – Rastko Mar 03 '13 at 14:13

Start jquery animation again after it completes

3 Answers3