jquery가 왼쪽 상단의 값을 변경할만큼 빠르지 않다.

Question

나는 여기에서 매우 간단한 논리를 사용했다. 나는 컨테이너를 만들고,이 경우에 CSS 폰트 줌을 수행 할 필요가있는 필요한 위치의 꼭대기에 놓는다.

.sortable li 주변에서 마우스를 빠르게 움직이면 문제가 발생합니다. 단어가 날아 다니기 시작합니다.

데모 : http://mac.idev.ge:800/words/ 단어 위에 마우스를 올려 놓습니다.

이상하지 않습니까? 이 문제를 해결하기 위해 코드를 최적화하려면 어떻게해야합니까?

// Zoom on hover effect for sortable items 
// Create empty container 
$("body").append("<div id='words_zoom'></div>"); 
var wz = $("#words_zoom"); 

$(document).on({ 
    mouseenter: function() { 
     var item = $(this); 
     var item_offset = item.offset(); 

     // position the zoom container 
     var central_left = item_offset.left; 
     var central_top = item_offset.top; 

     wz.show(); 

     wz.css({"left":central_left,"top":central_top}); 

     wz.html(item.html()); 

     // 
     //wz.stop().animate({"font-size":"2.2em",top:"-=3",left:"-=3"}, 300, "easeOutExpo"); 
    }, 
    mouseleave: function() { 
     // 
    } 
}, ".sortable li:not('.delete-text')"); 

// 
$(document).on("mouseleave", "#words_zoom", function() { 
    //wz.css({"font-size":"2em",top:"+=3",left:"+=3"}).hide(); 
    wz.hide(); 
    wz.css({"left":0,"top":0}); 
}); 

Answer 1

문제는 CSS에서 실제로 :

#words_zoom { 
    background: #fff; 
    display: none; 
    position: absolute; 
    font-family: 'Lato', sans-serif; 
    font-size: 2em; 
    cursor: pointer; 
    text-transform: capitalize; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 

은 (난 당신이 글꼴 크기를 혼자 원하는 추측하고있어)에 당신이 그것을 원하는 속성에만 전환에 전환 속성을 변경하십시오.

#words_zoom { 
    background: #fff; 
    display: none; 
    position: absolute; 
    font-family: 'Lato', sans-serif; 
    font-size: 2em; 
    cursor: pointer; 
    text-transform: capitalize; 
    -webkit-transition: font-size 0.3s ease; 
    -moz-transition: font-size 0.3s ease; 
    -o-transition: font-size 0.3s ease; 
    -ms-transition: font-size 0.3s ease; 
    transition: font-size 0.3s ease; 
}