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 again をクリックしたときに、アニメーション/関数全体を再生したいと思います。

以前の未完成のコードで申し訳ありませんどんな助けも大歓迎です..ありがとう

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

4

3 に答える 3

1

これは、再帰を使用して簡単に実行できます。

$(document).ready (function() {
  $('#link1').one('click',function() {
    function goAgain() {
      $('#image1').animate({left:'200px', top:'300px'}, 2000);
      goAgain();
    }
  });
});
于 2013-03-03T13:14:49.150 に答える
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 に答える
0

あなたの場合、 .one() が問題を引き起こしています。それを .on() にするだけで、クリックごとにアニメーションが実行されます。

連続アニメーションが必要な場合：

この無限アニメーションには 2 つの優れた解決策があります。

1 - JavaScript で設定間隔を使用します。

setInterval(function,millisec)

終了するたびに繰り返すように設定するだけなので、ミリ秒は 2000 で、関数は jquery animate です。

2 - css3 アニメーションを使用する:

ここで記事を入手しましたhttp://metaphorical-lab.com/blog/?p=302そして、例は上部の左側のサイドバーに浮かんでいます:D

于 2013-03-03T13:02:07.443 に答える