jQuery Make image rotating interval decrease smoothly

here is my site:

I'm trying to get the CD to slowly stop spinning or slowly start up again when I click a button or press the spacebar, but setTimeout() hasn't worked for me.

Thanks.

Below is the js in my body.

var diskCenter = [480, 480];
var disk = new Image;
disk.src = 'disk.jpg';
window.onload = function () {
    var ang = 0;
    var c = document.getElementsByTagName('canvas')[0];
    var ctx = c.getContext('2d');
    setInterval(function () {
        ctx.save();
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.translate(c.width, 0);
        ctx.rotate(Math.PI / 180 * (ang += 5));
        ctx.drawImage(disk, -diskCenter[0], -diskCenter[1]);
        ctx.restore();
    }, 25);
};

You will have to use clearInterval() function for stopping your CD. Since you have rotated the CD using setInterval().

Here you go.

HTML :

Include a link :

Stop

Javascript : I am using Jquery here. So include :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

            var my = setInterval(function(){
                ctx.save();
                ctx.clearRect( 0 , 0, c.width, c.height );
                ctx.translate( c.width , 0 );
                ctx.rotate(Math.PI / 180 * (ang += 5));
                ctx.drawImage( disk, -diskCenter[0], -diskCenter[1] );
                    ctx.restore();

            },25);     

        $(document).ready(function(){
            $("#stop").click(function(e){
                e.preventDefault();
                window.clearInterval(my);
            });
        });

I believe it will make sense.