Stop setInterval immediately

Vote count:

0

JSFiddle Link

I'm trying to make the background and text flash black and white, then stop when you click pause, but I notice there is a significant delay when you press the Pause button and the delay increases the longer you let the animation play.

I'm using Velocity.js, a jquery add-on, to do the animations.

    $(document).ready(function() {
  var $title = $("#title");
  var $body = $("body");

  function blackout() {
    $title.velocity({
        colorRed: '+=100%',
        colorBlue: '+=100%',
        colorGreen: '+=100%'}, {loop: 1, duration: 50});
    $body.velocity({
        backgroundColorRed: '-=100%',
        backgroundColorBlue: '-=100%',
        backgroundColorGreen: '-=100%'
        }, {loop: 1, duration: 50})
    };

  $("#play").click(function() {
  var blackoutloop = setInterval(blackout, 100);
    $("#pause").click(function() {
        clearInterval(blackoutloop);
    });
  });

});

What is causing that delay and how do I fix it?

asked 18 secs ago

joel

1