與許多元素的jQuery動畫背景

我想創造一個背景，許多圈子移動，它真的推動瀏覽器太難了。與許多元素的jQuery動畫背景

有沒有什麼辦法可以做到這一點，而不是太耗費資源？

$(document).ready(function() { 

    // Create all our glorious bubbles 
    for (var i = 1; i <= 150; i++) { 
     $('#bubbles').append('<span class="bubble' + i + '"></span>'); 
    } 

    // Get random number 
    function getRandomInt (min, max) { 
     return Math.floor(Math.random() * (max - min + 1)) + min; 
    } 

    // Function to move bubbles randomly 
    function moveRandom(obj) { 
     var positionTop = getRandomInt(-350,1000); 
     var positionLeft = getRandomInt(-700,1600); 
     var positionTopNew = positionTop + getRandomInt(-50,50); 
     var positionLeftNew = positionLeft + getRandomInt(-50,50); 
     var size = getRandomInt(30,60); 

     function animation() { 
      obj.animate({ 
       top: positionTop + 'px', 
       left: positionLeft + 'px', 
       width: size, 
       height: size 
       }, 6000 
      ); 
      obj.animate({ 
       top: positionTopNew + 'px', 
       left: positionLeftNew + 'px' 
       }, 6000, function() { 
        animation(); 
      }); 
     } 

     animation(); 
    } 

    // Activate bubble movement 
    $('#bubbles span').each(function() { 
     moveRandom($(this)); 
    }) 
});

還是隻是太多的元素的動畫，這將永遠是一個資源豬？

來源

2014-02-15 zen