Запустите jquery animation снова после завершения

Question

Я новичок в JQuery и в настоящее время не в состоянии решить эту проблему. Я щелкнул ссылку небольшим фрагментом анимации. Однако анимация не будет воспроизводиться, когда я снова нажимаю ссылку. Мне нужно обновить страницу, чтобы она работала.

Вот полный код. Я пытаюсь сделать серию анимации, когда кто-то нажимает.

Вот обновленный код

$(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(); 
     }); 
    }); 
}); 

Я хотел бы иметь всю анимацию/функцию, которая будет воспроизводиться, когда кто-то нажимает на ссылку #start ID снова ..

Извините за предыдущий незаконченный код Любая помощь очень ценится .. еще раз спасибо

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

Answer 1

В вашей case, .one() вызывает вашу проблему, вам просто нужно сделать это .on(), и вы будете иметь анимацию, выполненную за каждый клик.

Если вы хотите непрерывной анимации:

Есть два хороших решения этой бесконечной анимации:

1 - использование заданного интервала в JavaScript:

setInterval(function,millisec) 

вы просто установить его повторить каждый раз, когда он заканчивается, значит, миллисекунды в вашем случае - 2000, а функция - ваш анимированный jquery.

2 - использование CSS3 анимации:

Я получил статью здесь http://metaphorical-lab.com/blog/?p=302 и пример плавающая вокруг левой панели на верхней: D

Answer 2

Это можно легко сделать с помощью рекурсии.

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

Answer 3

Необходимо выполнить сброс позиции div каждый раз, когда вы хотите выполнить эту анимацию. Я добавил это к вашему 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'); 
      }); 
     } 
    }); 
}); 

я удалил последние несколько анимаций (они все еще находятся в скрипкой просто не здесь, на SO), так как они занимают много места - и не способствовали решению.