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

当有人再次点击链接ID #start时，我希望重播整个动画/功能。

对于之前未完成的代码感到抱歉非常感谢任何帮助..再次感谢

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

Answer 1

这可以使用递归轻松完成。

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

Answer 2

每次要执行此动画时，都必须重置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');
            });
        }
   });
});

我删除了最后几个动画（它们仍然在小提琴中，因为它们占用了大量空间 - 并没有为解决方案做出贡献。

Answer 3

在您的情况下，.one（）导致您的问题，您只需要将其设为.on（），并且每次点击都会执行动画。

如果你想要连续动画：

这个无限动画有两个不错的解决方案：

1 - 在javascript中使用设置间隔：

setInterval(function,millisec)

你只需将它设置为每次完成时重复，所以你的情况下的毫秒是2000，函数是你的jquery动画。

2 - 使用css3动画：

我在这里得到了文章http://metaphorical-lab.com/blog/?p=302，示例在左侧边栏上浮动：D

完成后再次启动jquery动画

3 个答案: