カーソル位置のテキストを変更する

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のアニメーションのdurationプロパティを変更する必要があります。ここ

は作業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/