jQuery hover is too slow

Question

Please run the snippet and drag you mouse over the bar to make it red. If you drag the mouse very slowly, you will fill it red, but if you move it fast, there will be white holes in it.

How to fix it? (the white holes)

I want to make a bar divided into 500 parts and if you hover it, it becomes red and being able to drag fast and fill it without holes.

Any help appreciated :)

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  tile.hover (
    function() { //hover-in
      $(this).css("background-color","red");
    },
    function() { //hover-out
      
    }
   );
    
});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

Answer 1

With your design one way would be to iterate over the first to your current hovered element and fill it, which would lead no spaces. That said you may want to consider using the HTML5 Canvas and drawing a rectangle from 0 to your mouse position, which will perform significantly faster.

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  tile.hover (
    function() { //hover-in
      var self = this;
      $("#line").children().each(function(){
        $(this).css("background-color","red");
        if(this == self) return false;
      });
    },
    function() { //hover-out
      
    }
   );
    
});

#line{
  height: 50px;
  background-color: #000;
  width: 500px;
}
.tile {
  height: 50px;
  float: left;
  background-color: #ddd;
  width: 1px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div id="line"></div>

---

Edit

Below is an example doing the same task but using the HTML 5 Canvas:

$("#line").mousemove(function(e){
  var canvas = $(this)[0];
  var ctx = canvas.getContext("2d");
  var rect = canvas.getBoundingClientRect()
  var x = e.clientX - rect.left;
  ctx.fillStyle="red";
  ctx.fillRect(0, 0, x, canvas.height);
});

#line{ background-color: #ddd; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="line" width=500 height=50 ></canvas>