Why my snow go backward? (a program that mimic snowing)

Question

Below is my Javascript file. The snows all appear good at the beginning, but when some of them hit the screen bottom, some kind of weird behavior happens. Snow start to behave unexpectedly and move up and down repeatedly not in a way that is programmed.

I could not figure out why by stating at my codes. Can anyone give me a pointer on where I have gone wrong?

Thanks in advance!

/*
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 function generateSnow, change this line

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

to

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

Remove position:relative; in snow class css file.

See the working example in http://jsfiddle.net/8BNbh/6/