完成后再次启动jquery动画

我是JQuery的新手，目前无法解决此问题。点击链接，我创建了一小段动画。但是，当我再次单击该链接时，动画将不会重播。我需要刷新页面才能使其工作。完成后再次启动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(); 
     }); 
    }); 
});

我想有整个动画/功能重播，当有人再次点击该链接ID＃开始..

对不起，以前未完成代码任何帮助深表感谢..再次感谢

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

来源

2013-03-03 Gops

使用'setTimeout'功能。此外，它是'.on'，而不是'.one' – hjpotter92 2013-03-03 12:51:54

'one'是专门用来当你想要处理程序是无界的，一旦行动被触发。 – 2013-03-03 12:59:05

你想让它每次都从同一个位置开始吗？或者为每个电话打出最高300px，600px，900px等？ – 2013-03-03 13:07:35

在你情况下，.one（）导致你的问题，你只需要使它.on（），你会有每个点击执行动画。

如果你想连续动画：

有两个很好的解决方案，这无限的动画：

1 - 在JavaScript中使用设定的时间间隔：

setInterval(function,millisec)

您只需将其设置为重复每次它完成，你的情况下的毫秒是2000年，功能是你的jquery动画。

2 - 使用CSS3动画：

我文章在这里http://metaphorical-lab.com/blog/?p=302和例子左右浮动留在顶部侧边栏：d

来源

2013-03-03 13:02:07 Rastko

我刚刚更改为.on并且动画无法正常工作..我在哪里出错了？当我切换回.one时，它再次工作 – Gops 2013-03-03 14:03:31

只是做$（linkselector）.click（function（）...它应该这样做。如果它没有检查调试控制台 – Rastko 2013-03-03 14:13:27

这可以很容易地使用递归方法来实现。

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

来源

2013-03-03 13:14:49 Gunther

'.one'，认真吗？ – hjpotter92 2013-03-03 13:29:21

对不起这不适用于我，我刚刚更新了完整的代码查询。谢谢 – Gops 2013-03-03 14:01:32

您必须在每次执行此动画时重置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），因为他们占用了大量的空间 - 并没有对解决方案做出贡献。

来源

2013-03-03 14:51:54

您的解决方案似乎几乎适合。然而，由于有一系列的动画，有没有什么办法可以在点击后重新调用和加载整个函数。这样，当有人点击开始链接时，我可以开始动画。非常抱歉，花时间解决这个问题。 – Gops 2013-03-03 17:53:21

完成后再次启动jquery动画

回答

相关问题