jQuery 호버가 너무 느림

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>

Answer 1

이 은

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

이

Answer 2

공백을 이끌없는 것이다, 그것을 현재 공중 선회 요소에 첫번째 반복 및 채우기하는 것입니다 설계 한 방법으로. 즉, HTML5 캔버스를 사용하고 마우스 위치에 0의 직사각형을 그릴 수 있습니다. 이렇게하면 훨씬 빠르게 수행됩니다.

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

:

$(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 캔버스를 사용하고

Answer 3

또 다른 해결책은 jQuery의 MouseMove 이벤트 방법을 사용합니다 .. 형제를 선택 nextUntil 또 다른 접근 방법이다. 이렇게하면 바가 커서 위치를 따라 간단히 앞뒤로 이동할 수 있습니다.

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>