How to stop animation after sometime?

Question

I am trying out the snow-fall animation. I want to stop it after for e.g. 5 seconds. I have current add the animate between setTimeOut, somehow there's no effect. What am I missing here?

Current code:

function fallingSnow() {

   var snowflake;
   snowflake = $('<div class="snowflakes"></div>');

   $('#snowZone').prepend(snowflake);
   snowX = Math.floor(Math.random() * $('#site').width() / 4);
   snowSpd = Math.floor(Math.random() + 50000);

   snowflake.css({
       'left': snowX + 'px'
   });

   setTimeout(function(){
      snowflake.stop().animate({
          top: "700px",
          opacity: "5",
      }, snowSpd, function () {
          $(this).remove();
          fallingSnow();
      })
  },5000);
}

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

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

---

UPDATE: AFTER UTILIZING @Kyojimaru's answer.

snowflake.animate({
        top: "700px",
        opacity: "5",
    }, 5000, function () {
        $(this).remove();           

      if(!end) {
        fallingSnow();
        window.setTimeout(function () {
        clearInterval(interval);
        end = true;
        }, 5000);
      }
    }                          
   );

• updated fiddle

Answer 1

it's because your setInterval never stopped from calling fallingSnow, try changing your code to this

var firstCall = false;
var interval, timeout;
function fallingSnow() {

   var snowflake;
   snowflake = $('<div class="snowflakes"></div>');

   $('#snowZone').prepend(snowflake);
   snowX = Math.floor(Math.random() * $('#site').width() / 4);
   snowSpd = Math.floor(Math.random() + 50000);

   snowflake.css({
       'left': snowX + 'px'
   });

   if(!firstCall) {
       timeout = setTimeout(function(){
           clearInterval(interval);
       },5000);
       firstCall = true;
   }
}

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

interval = setInterval(function () {
    fallingSnow();
}, timer);

basically what you need is clearing the interval that has been set for the function fallingSnow() using clearInterval only on the first time the function is called using setTimeout

here's the other example about it with what you want to do : JSFIDDLE

and here's what probably happen to you now : JSFIDDLE

EDIT

based on your fiddle here ( need to add jQuery and snowflakes css width and height to anything beside 0px )

your problem is you declare in the script as

var firstTime = false;

but checking it with

if (!firstCall)

so you need to change var firstTime = false; to var firstCall = false;

the other problem arise from this code here

snowflake.animate({
    top: "700px",
    opacity: "5",
}, snowSpd, function () {
    $(this).remove();
    fallingSnow();
});

which call the fallingSnow(); function again when animate finished, thus the snow is never stop falling, so you need to check if the the setTimeout have already clear the interval or not, you need to change your code to this

snowflake.animate({
    top: "700px",
    opacity: "5",
}, snowSpd, function () {
    $(this).remove();
    if(!end) {
        fallingSnow();
    }
});

if (!firstCall) {
    timeout = setTimeout(function () {
        clearInterval(interval);
        end = true;
    }, 5000);
    firstCall = true;
}

and add var end = false; in the start with firstCall

here's the working one : JSFIDDLE