更改光标位置上的文本

Question

我正在尝试根据光标位置更改文本。 它正在工作，但变化的灵敏度是快速的方式。 所以我想知道是否有一种方法来调整这一点，即变化不是那么快。

var text = ['Orange', 'Banana', 'Strawberry', 'Melon'] 
 
$(document).mousemove(function(event) { 
 
    var randomItem = text[Math.floor(Math.random() * text.length)]; 
 
    var div = $("#message"); 
 

 
    div.stop().animate({ 
 
    "opacity": "1" 
 
    }, 1, function() { 
 
    $(this).text(randomItem); 
 
    $(this).stop().animate({ 
 
     "opacity": "1" 
 
    }, 1); 
 
    }); 
 
});

#message { font-size: 54px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="message">Move the mouse.</div>

http://jsfiddle.net/2raaa/23/

Answer 1

我相信你可以制定一个更好的解决方案。在你的情况，你只专注于鼠标的移动，因为要提高敏感度，你可以观察到鼠标的实际位置：

var text = ['Orange', 'Banana', 'Strawberry', 'Melon'] 
 
var pos = {x: 0, y:0}; 
 
$(document).mousemove(function(event) { 
 
    var randomItem = text[Math.floor(Math.random() * text.length)]; 
 
    var div = $("#message"); 
 
    if (event.pageX > pos.x+30 || event.pageY > pos.y+30 || event.pageY < pos.y -30 || event.pageX < pos.x-30) { 
 
    pos.x = event.pageX; 
 
    pos.y = event.pageY; 
 
    div.stop().animate({ 
 
     "opacity": "1" 
 
    }, 1, function() { 
 
     $(this).text(randomItem); 
 
     $(this).stop().animate({ 
 
     "opacity": "1" 
 
     }, 1); 
 
    }); 
 
    } 
 
});

#message { font-size: 54px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="message">Move the mouse.</div>

Answer 2

你必须改变了jQuery动画的时间属性。

这里是一个工作plunker：

var text = ['Orange', 'Banana', 'Strawberry', 'Melon'] 
$(document).mousemove(function(event) { 
    var randomItem = text[Math.floor(Math.random() * text.length)]; 

    var div = $("#message"); 
    div.stop().animate({ 
    "opacity": "1" 
    }, 50, function() { 
    $(this).text(randomItem); 
    $(this).stop().animate({ 
     "opacity": "1" 
    }, 1); 
    }); 

}); 

http://jsfiddle.net/2raaa/27/