Changer le texte sur la position du curseur

Question

J'essaie de changer un texte en fonction de la position du curseur. Cela fonctionne mais la sensibilité au changement est trop rapide. Donc je me demandais s'il y avait un moyen d'ajuster cela, que le changement n'est pas si rapide.

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

Je suis sûr que vous pouvez formuler une meilleure solution. Dans votre cas, vous vous concentrez uniquement sur le mouvement de la souris, puisque vous voulez augmenter la sensibilité que vous pouvez observer la position réelle de la souris:

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

vous devez changer la propriété durée du Animer jquery.

ici est un travail 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/