Utwórz losowo spadający obiekt w Jquery

Question

Staram się, aby div spadł z góry na dół. Oto kod, który próbowałem, ale nie zaspokaja moich potrzeb. Chcę wygenerować 20 elementów div, które są gotowe, jak to zrobić, aby 20 elementów div stale spadało z góry na dół. Czy jest to możliwe w jquery. http://jsfiddle.net/MzVFA/ Oto kod

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); 

wdzięczni za pomoc.

Dzięki

Answer 1

Nie jestem pewien, czy tego właśnie chcesz.

Animuję 20 płatków śniegu, poczekaj, aż animacja zakończy się dla wszystkich z nich, a następnie ponownie uruchom ponownie.

jsfiddle

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(); 

---

Aktualizacja

Wersja ta tworzy 20 DIV tylko raz, i animować je ponownie i ponownie.

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(); 

---

Update2

Ten jeden, który inicjuje left raz animacja jest wykonywana dla każdego płatka, wygląda bardziej naturalnie moim zdaniem. zmienił również opóźnienie z

Math.random() + 5000 

do

Math.random()*-2500 + 5000 

demo

Answer 2

To jest proste. Twój projekt funkcji musi być taki.

function snowflake() 
{ 

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

} 

Answer 3

to sprawdzić, całkiem prosta i po prostu dodaje funkcję, która wyzwala jquerysnow(), a następnie wywołuje się ponownie wit losowy czas

zaktualizowany kod teraz po prostu utworzy 20 płatków śniegu

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/