更改光標位置上的文本

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/