jQuery hover太慢了

Question

请运行这段代码，并拖动鼠标使其变为红色。 如果您将鼠标移动得很慢，它将会被填充成红色，但如果您移动得很快，它将会有白色的缺口。

如何解决这个问题（白色缺口）？

我想把一根条形图分成500部分，当你将鼠标悬停在上面时，它会变成红色，并且能够快速拖动并填充没有缺口。

非常感谢您的帮助 :)

$(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>

- Avago24

---

这是预期的行为，你需要拖动滑条并填充直到鼠标只剩下它吗？而不是真的将它分成500个部分？ - Kresimir Pendic

Answer 1

对于你的设计，一种方法是迭代从第一个元素到当前鼠标悬停的元素并填充它，这样不会有空格。也就是说，您可能希望考虑使用HTML5 Canvas，并从 0 绘制矩形到鼠标位置，这将具有更高的性能。

$(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>

---

编辑

以下是一个使用HTML 5画布完成相同任务的示例:

$("#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>

- Spencer Wieczorek

Answer 2

这是另一种使用 nextUntil 选择兄弟元素的方法。

$(function() {

  var line = $("#line");
  
  for ( var i = 0; i < 500; i++) {
  
    line.append('<div class="tile" id="t'+(i+1)+'"></div>');
    
  }
  
  var tile = $(".tile");
  
  line.on( 'mouseover', function(ev){
    $('.tile').first().nextUntil( $('.tile').eq(ev.pageX) ).css("background-color","red");
  });

  line.on( 'mouseleave', function(ev){
    $('.tile').css("background-color","#ddd");
  });

});

#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>

- Kresimir Pendic

Answer 3

另一种解决方案利用了jQuery的mousemove方法。这允许条形图前进和后退，只需跟随光标位置即可。

这会检测div内部的移动，然后我将光标在div内的位置计算为百分比，并将其应用为红色条的宽度。

    $( ".bar" ).mousemove(function( event ) {
      var xCord = event.pageX;
      xPercent = (xCord + $('.pct').width()) / $( document ).width() * 100;
  
      $('.pct').width(xPercent+'%');
  
    });

    

    
    .bar{
        background:'#999999';
        width:50%;
        height:50px;
 
    }

    .pct{
        height:100%;
        background:red;
        width:0%;
    }

    

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
    </script>
    
    <div class="bar" style="background:#999999">
        <div class="pct"></div>
    </div>
    

- ThatCoderGuy