I’m making a circle follow the cursor but want it to fadeout when the mouse stops

Im making a circle follow the cursor using jquery which works fine but i was wondering if there was a way so that the circle fades out whenever the mouse stops.

I have tried using mouseout funtion of jquery and making the opacity 0 but it would just stop the circle in between whenever the mouse stops which is obvious but is there some other method to achieve this ?

My jquery code –

 var mouseX = 0, mouseY = 0;
   var xp = 0, yp = 0;
        
  $(document).mousemove(function(e){
    
    $("#circlecc").css({opacity: 1})
     
    mouseX = e.pageX - 12;
    mouseY = e.pageY - 12;
    
  });

  setInterval(function(){

    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
    $("#circlecc").css({left: xp +'px', top: yp +'px'});
    
  }, 20);

Also while moving the cursor below the site or beyond the site the circle goes beyond the site too and adds a scroll bar, is there a way to avoid that

The Website