完成後再次啓動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動畫

回答

相關問題