Continue value change on mouseend for a given time integer
<p>I'm animating a background gradient on mousemove, but I'd like to add a slight delay/lag/unsure of terminology so when you stop moving the mouse the values continue changing for an extra 1s or similar.</p>

<p>This is my code so far. I thought perhaps using a timeout would work but surely that would create a delay on the mousestart whereas it just needs to continue on mouseend.</p>

<p>Any thoughts or pointers?</p>

<pre><code>$('main.home').each(function() {
    var $this = $(this),
    color1 = $this.data('color-1'),
    color2 = $this.data('color-2'),
    color3 = $this.data('color-3'),
    color4 = $this.data('color-4'),

    $this.mousemove(function(event) {

        x = event.pageX - (this.offsetLeft * 1000);
        y = event.pageY - (this.offsetTop * 100);

        radius = x * 100 / y;
        number1 = Math.min(Math.max(parseInt(radius), 33), 53);
        number2 = Math.min(Math.max(parseInt(radius), 63), 83);

        var bg = 'radial-gradient(circle farthest-corner at ' + x + 'px ' + y + 'px, ' + color1 + ' 0%, ' + color2 + ' ' + number1 + '%, ' + color3 + ' ' + number2 + '%, ' + color4 + ' 100%)';
        $this.css('background-image', bg);
    });
});
</code></pre>