2011-01-31 21 views
9

OK, esto funciona perfectamente bien para seguir mi mouse.cómo animar siguiendo el mouse en jquery

// 
$(document).mousemove(function(e){ 
    $("#follower").css({ 
     'top': e.pageY + 'px'; 
     'left': e.pageX + 'px'; 
    }); 
}); 
// 

Y esto funciona muy bien para animar el ratón a un punto

// 
$(document).click(function(e){ 
    $("#follower").animate({ 
     top: e.pageY + 'px'; 
     left: e.pageX + 'px'; 
    }, 800); 
}); 
// 

Pero personalmente creo que, lógicamente, esto debería funcionar clic! Viniendo desde mi punto de vista como webscripter. Entonces, mi pregunta es, ¿cómo puedo hacer que esto funcione? Quiero que el # follower intente y siga mi mouse con un tipo dinámico de sensación de retraso.

// 
$(document).mousemove(function(e){ 
    $("#follower").animate({ 
     top: e.pageY + 'px'; 
     left: e.pageX + 'px'; 
    }, 800); 
}); 
// 

Respuesta

31

Cómo sobre el uso y la paradoja setInterval una ecuación denominada de Zenón:

http://jsfiddle.net/88526/1/

Esa es la manera en que yo suelo hacerlo.

Según lo solicitado, he incluido el código en esta respuesta. Dado un div con posición absoluta:

CSS:

#follower{ 
    position : absolute; 
    background-color : red; 
    color : white; 
    padding : 10px; 
} 

HTML:

<div id="follower">Move your mouse</div> 

JS w/jQuery:

var mouseX = 0, mouseY = 0; 
$(document).mousemove(function(e){ 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 

// cache the selector 
var follower = $("#follower"); 
var xp = 0, yp = 0; 
var loop = setInterval(function(){ 
    // change 12 to alter damping, higher is slower 
    xp += (mouseX - xp)/12; 
    yp += (mouseY - yp)/12; 
    follower.css({left:xp, top:yp}); 

}, 30); 
+0

gracias Zevan, voy a tratar ese derecho ahora. Si tengo problemas con la ecuación, volveré :) –

+0

Guau, lo hiciste todo por mí. Eres el hombre. Puede ser bueno para la comunidad si esta respuesta se publica directamente en SO. ¿Te importaría si edité tu respuesta para incluir esto? –

+1

Seguro, agregaré el código ahora. – Zevan