Jquery'de Rastgele Düşen Nesne Oluşturma

Question

Tanrının yukarıdan aşağıya düşmesini sağlamaya çalışıyorum. İşte denedim ama ihtiyaçlarımı karşılamıyor kodudur. Bir kez hazır 20 satır üretmek istiyorum o zaman nasıl sürekli olarak yukarıdan aşağıya doğru sürekli olarak düşen 20 div yapmak. Bunu jquery'de yapmak mümkün mü? http://jsfiddle.net/MzVFA/ Burada çok

function fallingSnow() { 

     var snowflake = $('<div class="snowflakes"></div>'); 
     $('#snowZone').prepend(snowflake); 
     snowX = Math.floor(Math.random() * $('#site').width()); 
     snowSpd = Math.floor(Math.random() + 5000); 

     snowflake.css({'left':snowX+'px'}); 
     snowflake.animate({ 
      top: "500px", 
      opacity : "0", 

     }, snowSpd, function(){ 
      $(this).remove(); 
      fallingSnow(); 
     }); 

    } 
    var timer = Math.floor(Math.random() +1000); 

    window.setInterval(function(){ 
     fallingSnow(); 
    }, timer); 

senin Yardım takdir kodu olduğunu.

Teşekkür

Answer 1

İstediğiniz şey bu olduğundan emin değil.

20 kareyi canlandırıyorum, animasyon hepsini bitirene kadar bekleyin, ardından, daha sonra yeniden başlatın.

function fallingSnow() { 

    var $snowflakes = $(), qt = 20; 

    for (var i = 0; i < qt; ++i) { 
     var $snowflake = $('<div class="snowflakes"></div>'); 
     $snowflake.css({ 
      'left': (Math.random() * $('#site').width()) + 'px', 
      'top': (- Math.random() * $('#site').height()) + 'px' 
     }); 
     // add this snowflake to the set of snowflakes 
     $snowflakes = $snowflakes.add($snowflake); 
    } 
    $('#snowZone').prepend($snowflakes); 

    $snowflakes.animate({ 
     top: "500px", 
     opacity : "0", 
    }, Math.random() + 5000, function(){ 
     $(this).remove(); 
     // run again when all 20 snowflakes hit the floor 
     if (--qt < 1) { 
      fallingSnow(); 
     } 
    }); 
} 
fallingSnow(); 

---

Güncelleme

Bu sürüm sadece bir kez 20 div'leri oluşturur ve tekrar tekrar onları animasyon

jsfiddle

.

function fallingSnow() { 
     var $snowflakes = $(), 
      createSnowflakes = function() { 
       var qt = 20; 
       for (var i = 0; i < qt; ++i) { 
        var $snowflake = $('<div class="snowflakes"></div>'); 
        $snowflake.css({ 
         'left': (Math.random() * $('#site').width()) + 'px', 
         'top': (- Math.random() * $('#site').height()) + 'px' 
        }); 
        // add this snowflake to the set of snowflakes 
        $snowflakes = $snowflakes.add($snowflake); 
       } 
       $('#snowZone').prepend($snowflakes); 
      }, 

      runSnowStorm = function() { 
       $snowflakes.each(function() { 

        var singleAnimation = function($flake) { 
         $flake.animate({ 
          top: "500px", 
          opacity : "0", 
         }, Math.random() + 5000, function(){ 
          // this particular snow flake has finished, restart again 
          $flake.css({ 
           'top': (- Math.random() * $('#site').height()) + 'px', 
           'opacity': 1 
          }); 
          singleAnimation($flake); 
         }); 
        }; 
        singleAnimation($(this)); 
       }); 
     }; 

     createSnowflakes(); 
     runSnowStorm(); 
    } 
    fallingSnow(); 

---

jsFiddle Update2

animasyon her kar tanesi için bittiğinde, left başlatır bence daha doğal görünüyor Bu seferki. Ayrıca

Math.random()*-2500 + 5000 

demo

Answer 2

Bu basittir. Fonksiyon tasarımınız bu olmalıdır.

function snowflake() 
{ 

if($(".snowflakes").length <= 20) 
{ 
    generate_random_snowflake(); 
} 
else 
{ 
    call_random_snowflake(); 
} 

} 

Answer 3

onay bunu için

Math.random() + 5000 

den gecikme değişti, ben sadece tekrar jquerysnow() tetikler ve kendisini çağıran bir işlev eklendi oldukça basit rastgele zaman zekâ

güncellenen kodu şimdi sadece 20 kar pul üretecek

snowCount = 0; 
function snowFlakes(){ 
    console.log(snowCount); 
    if(snowCount > 20){ 

     return false 
    }else{ 
    var randomTime = Math.floor(Math.random() * (500) * 2); 
    setTimeout(function(){ 
     snowCount = snowCount +1; 
     jquerysnow(); 
     snowFlakes(); 
    },randomTime); 
    } 
} 
function jquerysnow() { 


     var snow = $('<div class="snow"></div>'); 
     $('#snowflakes').prepend(snow); 
     snowX = Math.floor(Math.random() * $('#snowflakes').width()); 
     snowSpd = Math.floor(Math.random() * (500) * 20); 

     snow.css({'left':snowX+'px'}); 
    snow.html('*'); 
     snow.animate({ 
      top: "500px", 
      opacity : "0", 

     }, 2000, function(){ 
      $(this).remove(); 
      //jquerysnow(); 
     }); 



} 

snowFlakes() 

http://jsfiddle.net/v7LWx/22/