0

我是 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/

4

3 回答 3

1

每次要执行此动画时，都必须重置 div 的位置。我已将此添加到您的 JSFiddle：

工作演示

$(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-03T14:51:54.737 回答
1

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

$(document).ready (function() {
  $('#link1').one('click',function() {
    function goAgain() {
      $('#image1').animate({left:'200px', top:'300px'}, 2000);
      goAgain();
    }
  });
});
于 2013-03-03T13:14:49.150 回答
0

在您的情况下， .one() 导致了您的问题，您只需将其设为 .on() ，每次点击都会执行动画。

如果你想要连续动画：

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

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

setInterval(function,millisec)

您只需将其设置为每次完成时重复，因此在您的情况下毫秒为 2000 并且功能是您的 jquery 动画。

2 - 使用 css3 动画：

我在这里得到了文章http://metaphorical-lab.com/blog/?p=302并且示例在顶部的左侧边栏周围浮动：D

于 2013-03-03T13:02:07.443 回答