Warum mein Schnee rückwärts gehen? (ein Programm, das schneit)

Question

Unten ist meine Javascript-Datei. Der Schnee scheint am Anfang gut zu sein, aber wenn einige von ihnen den Bildschirmboden berühren, passiert etwas seltsames Verhalten. Schnee beginnt sich unerwartet zu verhalten und bewegt sich wiederholt auf und ab, nicht in einer Weise, die programmiert ist.

Ich konnte nicht herausfinden, warum, indem Sie auf meine Codes. Kann mir jemand einen Hinweis geben, wo ich falsch gelaufen bin?

Vielen Dank im Voraus!

/* 
1. mimic the snow falling 
*/ 

$(document).ready(function(){ 



// get the height and width of the browser window 
var windowHeight = $(window).height(); 
var windowWidth = $(window).width(); 

// set the height and width of the #snowingScreen div equivalent to that of the window's 
$('#snowingScreen').css('height', windowHeight); 
$('#snowingScreen').css('width', windowWidth); 


// this function is to generate snow randomly scattered around screen 
function generateSnow() { 

    // generate snow using a for loop 
    for(i=0; i<4; i++){ 

     // randomize the top position of the snow 
     var snowTop = Math.floor(Math.random()* (windowHeight/2));  

     // randomize the left position of the snow 
     var snowLeft = Math.floor(Math.random()* (windowWidth - 10)); 

     // appending the snow to the #snowingScreen 
     $('#snowingScreen').append(

      // generate the div representing the snow and setting properties using various jQuery methods    
      $('<div />') 
       .addClass('snow') 
       .css('top', snowTop) 
       .css('left', snowLeft) 
       .text('*') 
     ); 

    } 

    // repeat the generateSnow() function for each 3 seconds 
    window.setTimeout(generateSnow, 3000);  

} 

// this function is to alter the position of each snow, using the handy .each() jQuery method 
function snowFalling(){ 

    // move the snow 
    $('.snow').each(function(key, value){ 

     // check if the snow has reached the bottom of the screen 
     if(parseInt($(this).css('top')) > windowHeight - 80) { 

      // remove the snow from the HTML DOM structure 
      $(this).remove(); 
     }  

     // set up a random speed 
     var fallingSpeed = Math.floor(Math.random() * 5 + 1); 

     // set up a random direction for the snow to move 
     var movingDirection = Math.floor(Math.random()*2); 

     // get the snow's current top 
     var currentTop = parseInt($(this).css('top'));  

     // get the snow's current top 
     var currentLeft = parseInt($(this).css('left'));     

     // set the snow's new top 
     $(this).css('top', currentTop + fallingSpeed); 

     // check if the snow should move to left or move to right 
     if(movingDirection === 0){ 

      // set the snow move to right 
      $(this).css('left', currentLeft + fallingSpeed); 

     }else { 

      // set the snow move to left 
      $(this).css('left', currentLeft + -(fallingSpeed));     

     }     

    });   

    // repeat the rollIt() function for each 200 microseconds 
    window.setTimeout(snowFalling, 200);    

}   

// call the function when the document is loaded completely 
generateSnow(); 
snowFalling(); 

}); 

Jsfiddle: http://jsfiddle.net/dennisboys/8BNbh/2/embedded/result/

Answer 1

In Funktion generateSnow, diese Zeile

ändern

$('<div />') 
       .addClass('snow') 
       .css('top', snowTop) 
       .css('left', snowLeft) 
       .text('*') 

zu

$('<div />') 
       .addClass('snow') 
       .css('top', snowTop) 
       .css('left', snowLeft) 
       .css('position','absolute') 
       .text('*') 

Remove Position: relative; in Schneeklasse CSS-Datei.

Siehe Arbeitsbeispiel in http://jsfiddle.net/8BNbh/6/