用jquery填充動畫無限循環

我想創建泡泡，幾次重複後我的瀏覽器卡住了。這是我的代碼。有人請幫助....我如何在完成許多請求後完成它。用jquery填充動畫無限循環

它看起來像我的帖子主要是代碼，但我加了這個足以＃1 :)細節

謝謝！

的Jquery：

$(document).ready(function() { 

          function bubbles() 
         { 


         var i = 0; 


         $(".circle").remove(); 



         for(i = 0; i < 3; i ++) 

         { 

          var CreateDiv = document.createElement('div'); 

         var AppendElem = document.body.appendChild(CreateDiv); 

         AppendElem.setAttribute('class','circle'); 

         CreateDiv.style.position = "absolute"; 

         var randomPosTop = Math.floor((Math.random() * 800) + 1); 

         CreateDiv.style.top = randomPosTop +"px"; 

         var randomPosLeft = Math.floor((Math.random() * 1200) + 1); 

         CreateDiv.style.left = randomPosLeft +"px"; 

         } 

         $(".circle").animate({ opacity :0.0,height:100, width:100 }, 5000,bubbles); 


         } 

         bubbles(); 


         });

CSS

 .circle{ width: 20px; 
       height: 20px; 
       background-color: #000; 
       border-radius: 100px; position:absolute;}

的jsfiddle

 https://jsfiddle.net/krishnakamal549/u4krxq8o/

來源

2016-02-21 Krishna Kamal

的問題是，回調在動畫中爲每個找到的元素調用。所以......第一次被稱爲3次，第二次是9次，第三次是18次，每次都會增加三倍，最終你會運行數百個「氣泡」實例。

你想用一個承諾來做這樣的回調。

$(".circle").animate({ 
    opacity: 0.0, 
    height: 100, 
    width: 100 
    }, 5000).promise().done(bubbles);

這樣，回調僅針對整個動畫觸發一次，而不是每個元素觸發一次。

FIDDLE

來源

2016-02-21 03:48:42 Smeegs

非常感謝smeegs但在本地主機它不加工。在控制檯中它顯示$（...）。animate（...）。promise不是一個函數，但是在小提琴中很完美。爲什麼？ Iam剛剛開始編碼幾個月回來，所以請讓我省卻，如果我聽起來很愚蠢...觸發氣泡函數onload所有我加$（document）.ready（function）{// your code}）; –

它可能是jquery版本或html頁面的文檔類型。 – Smeegs

我也會嘗試調試錯誤。取消承諾並查看是否仍然出現錯誤，然後刪除動畫並查看是否出現錯誤。嘗試縮小代碼以查看哪些部分未定義。 – Smeegs

$(".circle").animate({ 
    opacity: 0.0, 
    height: 100, 
    width: 100 
}, 5000); 

$("body").animate({ opacity: 1 }, 5000, bubbles);

試試這個，這也適用。 但我建議使用Smeegs指定的approach。

這種方法增加了額外的過程中對body爲動畫，同時通過Smeegs方法直接處理其中施加動畫，無需額外的動畫製作過程上body

來源

2016-02-21 03:49:32 kanudo

用jquery填充動畫無限循環

回答

相關問題